1. html代码 v-bind:style 简写形式:style

<!--  第一层进度条的背景色  -->
 <view class="strip"> 
		 <!-- 第二层进度条的颜色 -->
		<view class="blue" :style="'width:'+info.progress+'%'"> 
			<!-- （进度条显示的图片  样式：根据父元素进行相对定位 ，本身绝对定位 ） -->
			<image src="../../static/list/niu.png" class="proImg" :style="'left:'+info.progress-1+'%'"> </image>
		</view>
 </view>

2.css代码

.strip {
		/* 父元素相对定位 */
		position: relative;
		width: 360rpx;
		height: 12rpx;
		color: rgba(80, 80, 80, 1);
		background-color: #F5F5F5;
		border-radius: 7rpx;
		font-size: 28rpx;
		line-height: 150%;
		text-align: center;
	}
	.blue {
		height: 12rpx;
		color: rgba(80, 80, 80, 1);
		background-color: #1676FE;
		border-radius: 7rpx;
		font-size: 28rpx;
		line-height: 150%;
		text-align: center;
	}
	.proImg{
		width:84rpx;
		height:76rpx;
		/* 子元素绝对定位   */
		position: absolute;
		/* 定位方向：属性值 */
		top:-30rpx
 	}

3.data(数据)

export default{
	data(){
			return{
					info:{
							progress:32,	
							}
					 }
			}
 }

这样一个简单的进度条就完成了(*￣︶￣)

最后

以上就是无辜面包为你收集整理的uniapp 进度条的全部内容，希望文章能够帮你解决uniapp 进度条所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。