首页 > PHP资讯 > 工具库 > 微信小程序组件progress进度条解读和分析

微信小程序组件progress进度条解读和分析

工具库
progress进度条组件说明:

进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件,和HTML5的进度条progress类似。


progress进度条组件示例代码运行效果如下:

下面是WXML代码:

    问:老司机,啥时候开车?    


下面是JS代码:

Page({  data:{  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})


下面是WXSS代码:

.content{  padding-top: 20px;}.con-text{  display: block;  padding-bottom: 20px;}.con-pro{  color: cornflowerblue;}

下面是WXML代码:

    不展示百分比        展示百分比(百分比字体样式通过class控制)        改变进度条线的宽度:15px        改变进度条颜色(#):黑色        改变进度条颜色(已定义):橘色        几个属性叠加    



下面是JS代码:

Page({  data:{  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})


下面是WXSS代码:

.content{  padding-top: 20px;}.con-text{  display: block;  padding-bottom: 10px;}.con-pro{  padding-bottom: 30px;  color: cornflowerblue;}

下面是WXML代码:

    看我开的飞起    


下面是JS代码:

Page({  data:{  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数  },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})



下面是WXSS代码:

.content{  padding-top: 20px;}.con-text{  display: block;  padding-bottom: 10px;}.con-pro{  padding-bottom: 30px;  color: cornflowerblue;}

progress进度条的主要属性:

以上就是微信小程序组件progress进度条解读和分析的详细内容,更多请关注 第一PHP社区 其它相关文章!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持47不支持0