uniapp的progress加载进度条使用
percent:绑定百分比,从0%到100%show-info:在进度条右侧显示百分比stroke-width:进度条线的宽度,单位pxactive:进度条从左往右的动画active-mode:forwards:动画从上次结束点接着播(用于实时加载)backgroundColor:未选择的进度条的颜色<view class="progress-box"><progress:per
·
percent:绑定百分比,从0%到100%
show-info:在进度条右侧显示百分比
stroke-width:进度条线的宽度,单位px
active:进度条从左往右的动画
active-mode:forwards:动画从上次结束点接着播(用于实时加载)
backgroundColor:未选择的进度条的颜色
<view class="progress-box">
<progress
:percent="percent"
show-info
active="true"
active-mode="forwards"
:stroke-width="10"
backgroundColor="#F5F5F5"
/>
</view>
data() {
return {
percent:0 //百分比0~100
}
},
onLoad() {
this.change()
},
methods: {
change(){
// 开启定时器,定时器同样可以用在请求当中
let clearInt = setInterval(()=>{
this.percent ++;
if(this.percent === 100){
clearInterval(clearInt)
uni.showToast({
title: "加载成功",
con: "success"
});
}
},30)
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)