wx-icon和progress
基本内容
index.wxml
<!--index.wxml-->
<view class="container">
<!--icon text progress-->
<!--success, success_no_circle, info, warn, waiting, cancel, download, search, clear-->
<!--type 用于定义图标类型,只能是规定范围的类型,除了这些内置图标,其他图标必须通过图片方式使用-->
<icon type="success_no_circle"></icon>
<!-- size 用于指定图标大小 默认是23 单位是px -->
<icon type="info" size="60"></icon>
<!-- color 用于指定图标颜色 取值就是CSS颜色取值 -->
<icon type="info" size="60" color="yellow"></icon>
<!--text类似于HTML中的p标签,但是p标签不能嵌套-->
<!--text主要是为了可以很好的控制页面上的内容-->
<!--text还支持换行-->
<text>这是一
段<text>文本</text>内容</text>
这是一段没有被text包裹的文本
<!-- 显示一个进度条 -->
<!-- show-info 是用来控制是否显示具体数值的的 -->
<progress percent="20" show-info />
<progress percent="50" active />
</view>
index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
这一串在这没有什么用,是创建时自带的,下面这个也是
index.css
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
wx-icon和progress的更多相关文章
- 微信小程序基础之常用控件text、icon、progress、button、navigator
今天展示一下基础控件的学习开发,希望对大家有所帮助,转载请说明~ 首先延续之前的首页界面展示,几个跳转navigator的使用,然后是各功能模块的功能使用 一.text展示 使用按钮,进行文字的添加与 ...
- 小程序开发-基础组件icon/text/progress入门
小程序的基础组件--基础内容 基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx: ...
- wx.Dialog
wx.Dialog A dialog box is a window with a title bar and sometimes a system menu, which can be moved ...
- 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架
使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...
- 微信小程序~基础组件
(1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视 ...
- wxPython中文教程入门实例
这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下 wxPython中文教程入门实例 wx.Window 是一个基类 ...
- Android布局优化
前言 本篇文章为Android优化的布局部分,该部分应该是Android中很重要的,无论是在自定义控件中,还是在简单的书写布局时,都应该尽量遵循一些优化原则,这样布局的绘制效率才会更高,体验才能更好. ...
- wxPython中添加窗口标题图标
这种添加方法可以避免要将应用程序和图标放在同一个目录,可以实现从模块中读取图标 #用于从module中读取ico,避免了要在程序所在路径附上此ico exeName = win32api.GetMod ...
- wxWidgets帮助文档(1)
IMPLEMENT_APP IMPLEMENT_APP(className) 这是在应用程序中使用类的实现文件的应用程序类wxWidgets动态建筑.你用这个代替Old form: MyApp myA ...
- wxPython中菜单、按钮学习
---恢复内容开始--- wx.Window 是一个基类,许多构件从它继承.包括 wx.Frame 构件.技术上这意味着,我们可以在所有的 子类中使用 wx.Window 的方法.我们这里介绍它的几种 ...
随机推荐
- 【Luogu P1265】公路修建
Luogu P1265 本来一开始我用的Kruskal--但是由于double类型8字节,所以MLE了. 很容易发现这是一道最小生成树的题目. 值得注意的是题目中给的第二个限制,只存在唯一情况即这个环 ...
- Spring中,多个service发生嵌套,事务是怎么样的?
前言 最近在项目中发现了一则报错:"org.springframework.transaction.UnexpectedRollbackException: Transaction roll ...
- scrapy抓取中国新闻网新闻
目标说明 利用scrapy抓取中新网新闻,关于自然灾害滑坡的全部国内新闻:要求主题为滑坡类新闻,包含灾害造成的经济损失等相关内容,并结合textrank算法,得到每篇新闻的关键词,便于后续文本挖掘分析 ...
- docker下安装测试环境estuntest
1.基础知识: docker pull centos //从云上下载centos系统到本地服务器 docker images //查看镜像docker rmi 镜像id //删除镜像 do ...
- 2019-2020-8 20199317 《Linux内核原理与分析》 第八周作业
第7章 可执行程序工作原理 1 ELF目标文件格式 1.1 ELF概述 “目标文件”,是指编译器生成的文件.“目标”指目标平台目标文件一般也叫作ABI(Application Bi ...
- Codeforces Round #452 (Div. 2) A B C
Codeforces Round #452 (Div. 2) A Splitting in Teams 题目链接: http://codeforces.com/contest/899/problem/ ...
- Python之HTTP静态服务器-面向对象版开发
利用面向对象的思想完成HTTP静态Web服务器的开发. 主要思路如下: 1.抽象出一个服务器类 1.1 编写类的对象属性 1.2 编写类的方法 注意: 在进行请求资源路径判断时,需要确认请求路径中是否 ...
- 基于VMware Workstation下Windows server的搭建
网络安全学习内容 一.VMware安装Windows系统 1.1安装配置虚拟机 需要提前准备的东西: 配置网络实验室的IP: 为了满足实验中一些需要用到网络的需求,学校为我们提供了每个人学号密码的 ...
- luogu P1417 烹调方案 |dp
题目背景 由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船飞到一半,gw发现了一个很严重的问题:肚子饿了~ gw还是会做饭的,于是拿出了储藏的 ...
- iOS 基本控件的使用以及系统层次架构(1)
User Interface iOS系统架构层次图 -CocoaTouch UI相关 -媒体层(Media) 音频.视频.图形.动画 -核心服务层(Core services) 内存.网络.文件.线 ...