uniapp的progress加载进度条使用

爱吃糖的小明

于 2021-03-31 16:02:31 发布

阅读量6.5k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45785873/article/details/115352620

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

该博客介绍了如何在Vue中实现一个动态加载的进度条，利用百分比属性、动画效果和事件监听来创建一个从0%到100%的加载过程。当进度达到100%时，显示加载成功提示。示例代码展示了如何设置`progress`组件的属性，如`percent`、`show-info`、`active-mode`等，并通过定时器更新百分比以模拟实时加载场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
			}
		}