progress进度条组件说明:
进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件,和HTML5的进度条progress类似。
progress进度条组件示例代码运行效果如下:
下面是WXML代码:
1 2 3 4 5 | < view class = "content" >
< text class = "con-text" >问:老司机,啥时候开车?</ text >
< progress class = "con-pro" percent = "97" show-info/>
</ view >
|
下面是JS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page({
data:{
},
onLoad: function (options){
},
onReady: function (){
},
onShow: function (){
},
onHide: function (){
},
onUnload: function (){
}
})
|
下面是WXSS代码:
1 2 3 4 5 6 7 8 9 10 | .content{
padding-top : 20px ;
}
.con-text{
display : block ;
padding-bottom : 20px ;
}
.con-pro{
color : cornflowerblue;
}
|
下面是WXML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page({
data:{
},
onLoad: function (options){
},
onReady: function (){
},
onShow: function (){
},
onHide: function (){
},
onUnload: function (){
}
})
|
下面是WXSS代码:
1 2 3 4 5 6 7 8 9 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 | < view class = "content" >
< text class = "con-text" >看我开的飞起</ text >
< progress class = "con-pro" active percent = "87" color = "lightgreen" show-info stroke-width = "20" />
</ view >
|
下面是JS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Page({
data:{
},
onLoad: function (options){
},
onReady: function (){
},
onShow: function (){
},
onHide: function (){
},
onUnload: function (){
}
})
|
下面是WXSS代码:
1 2 3 4 5 6 7 8 9 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 |
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
暂时没有评论,来抢沙发吧~