微信小程序组件解读和分析:progress进度条
Posted 微信开发--51小程序
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序组件解读和分析:progress进度条相关的知识,希望对你有一定的参考价值。
progress进度条组件说明:
进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件,和html5的进度条progress类似。
progress进度条组件示例代码运行效果如下:
下面是WXML代码:
[XML] 纯文本查看 复制代码
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代码:
[javascript] 纯文本查看 复制代码
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代码:
[CSS] 纯文本查看 复制代码
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代码:
[XML] 纯文本查看 复制代码
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代码:
[JavaScript] 纯文本查看 复制代码
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代码:
[CSS] 纯文本查看 复制代码
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代码:
[XML] 纯文本查看 复制代码
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代码:
[JavaScript] 纯文本查看 复制代码
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代码:
[CSS] 纯文本查看 复制代码
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进度条的主要内容,如果未能解决你的问题,请参考以下文章