微信小程序进度条

进度条组件:https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

注:这里模拟一个阅读书籍进度条功能。

1.动态获取总数、阅读数,进行计算。

js:

data: {
  total:5 , //一共五首
  readBook:1 //放存已阅读
}
 onLoad: function (options) {
    var that = this;
    var  progress= Math.round(that.data.readBook* 100 /that.data.total)
    console.log("**************百分比********"+progress)
   that.setData({
            progress: progress,
          })
},
wxml:
  <progress percent="{{progress}}" color="#f33" active stroke-width="8" border-radius="8" show-info="true" font-size="13"></progress>
最后效果:

 

 

posted @ 2021-04-20 13:56  简称LCH  阅读(411)  评论(0编辑  收藏  举报