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

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐