微信小程序进度条
进度条组件: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>
最后效果: