微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明:
进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件,和HTML5的进度条progress类似。
progress进度条组件示例代码运行效果如下:
下面是WXML代码:
1
2
3
4
5
|
<!--index.wxml--> < view class = "content" > < text class = "con-text" >问:老司机,啥时候开车?</ text > < progress class = "con-pro" percent = "97" show-info/> </ view > |
下面是JS代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 } }) |
下面是WXSS代码:
01
02
03
04
05
06
07
08
09
10
|
.content{ padding-top : 20px ; } .con-text{ display : block ; padding-bottom : 20px ; } .con-pro{ color : cornflowerblue; } |
下面是WXML代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<!--index.wxml--> < view class = "content" > < text class = "con-text" >不展示百分比</ text > < progress class = "con-pro" percent = "77" /> < text class = "con-text" >展示百分比(百分比字体样式通过class控制)</ text > < progress class = "con-pro" percent = "97" show-info/> < text class = "con-text" >改变进度条线的宽度:15px</ text > < progress class = "con-pro" percent = "47" stroke-width = "15" /> < text class = "con-text" >改变进度条颜色(#):黑色</ text > < progress class = "con-pro" percent = "67" color = "#000000" /> < text class = "con-text" >改变进度条颜色(已定义):橘色</ text > < progress class = "con-pro" percent = "67" color = "orange" /> < text class = "con-text" >几个属性叠加</ text > < progress class = "con-pro" percent = "87" color = "lightgreen" show-info stroke-width = "30" /> </ view > |
下面是JS代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 } }) |
下面是WXSS代码:
01
02
03
04
05
06
07
08
09
10
11
|
.content{ padding-top : 20px ; } .con-text{ display : block ; padding-bottom : 10px ; } .con-pro{ padding-bottom : 30px ; color : cornflowerblue; } |
下面是WXML代码:
1
2
3
4
5
|
<!--index.wxml--> < view class = "content" > < text class = "con-text" >看我开的飞起</ text > < progress class = "con-pro" active percent = "87" color = "lightgreen" show-info stroke-width = "20" /> </ view > |
下面是JS代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
Page({ data:{ }, onLoad: function (options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady: function (){ // 页面渲染完成 }, onShow: function (){ // 页面显示 }, onHide: function (){ // 页面隐藏 }, onUnload: function (){ // 页面关闭 } }) |
下面是WXSS代码:
01
02
03
04
05
06
07
08
09
10
11
|
.content{ padding-top : 20px ; } .con-text{ display : block ; padding-bottom : 10px ; } .con-pro{ padding-bottom : 30px ; color : cornflowerblue; } |
progress进度条的主要属性:
属性
|
类型
|
默认值
|
描述
|
percent | float | 0 | 表示0-100百分比 |
show-info | Boolean | false | 表示在进度条右侧显示百分比,写上属性即为true |
color | Color | #09BB07 | 表示进度条颜色,可以是#或者已定义颜色属性 |
stroke-width | Number | 6 | 单位:px,表示进度条显示的线条宽度 |
active | Boolean | false | 表示进度条从左往右的动画,动画到设置的百分比停止,写上属性即为true |
微信小程序组件解读和分析:六、progress进度条的更多相关文章
- 微信小程序组件解读和分析:五、text文本
text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...
- 微信小程序组件解读和分析:四、icon图标
icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...
- 微信小程序组件解读和分析:十四、slider滑动选择器
slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...
- 微信小程序组件解读和分析:十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 微信小程序组件解读和分析:八、checkbox复选项
checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...
- 微信小程序组件解读和分析:一、view(视图容器 )
view组件说明: 视图容器 跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...
- 微信小程序组件解读和分析:十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- 微信小程序组件解读和分析:十三、radio单选项目
radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...
- 微信小程序组件解读和分析:十二、picker滚动选择器
picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...
随机推荐
- 大话设计模式C++实现-第19章-组合模式
一.UML图 关键词:Leaf是叶子,Composite是非叶子节点,Composite包括Leaf. 二.概念 组合模式(Composite):将对象组合成树形结构以表示"部分-总体&qu ...
- [IT新应用]无线投影技术
会议室内投影时,经常会有笔记本与投影仪之间因兼容性等无法切换的现象. 了解了下,无线投影方案的厂家大致如下: 1.http://www.taco.net.cn/ 2.巴可无线投影 https://ww ...
- Repeater控件前台复杂逻辑判断
虽然现在开发大都是前后台ajax的方式,但是还有部分项目用后台cs代码+服务器控件开发的方式,小弟今天就遇到了一个 repeater显示列表,有一个字段是state状态,数据库里面存的是0 1 2类似 ...
- myeclipse.hbm.xml自动生成
第一,你的项目是否搭建了hibernate框架? 第二,你是否建立了相应的数据表: 第三,做好前两步,你再把myeclipse和数据库连接起来,在相应的表上点击右键,生成hibernate 关联文件就 ...
- Node.js 101(2): Promise and async
--原文地址:http://blog.chrisyip.im/nodejs-101-package-promise-and-async 先回想一下 Sagase 的项目结构: lib/ cli.js ...
- activity.runOnUiThread()内的run()方法没有被执行
activity.runOnUiThread(new Runnable() { public void run() { Toast.makeText(context, toast, Toast.LEN ...
- Database Firewall——mysql也是支持的
Database Firewall The most impressive feature of MySQL security is the Database Firewall. The firewa ...
- Bootstrap 垂直(默认)表单
在建立asp.net mvc视图中,默认的表单是垂直表单,与vs 自动创建的T4模板是水平表单,相比较,没有了<div class="form-horizontal"> ...
- C#托盘图标
在C#中实现托盘是多么简单 http://www.cnblogs.com/anytao/archive/2006/04/26/385377.html http://www.cnblogs.com/du ...
- python运行selenium时出现的一个错误总结
1.SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame 场景:运用pan ...