首页 > 代码库 > 微信小程序组件解读和分析:六、progress进度条
微信小程序组件解读和分析:六、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进度条
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。