uniapp进度条效果
文章描述：
uniapp进度条效果
template
<template>
<view class="container">
<!-- 第一层进度条的背景色 -->
<view class="strip">
<!-- 第二层进度条的颜色 -->
<view class="blue" :style="'width:'+info.progress+'%'"></view>
</view>
<!--循环-->
<view class="item" v-for="(item,index) in list">
<view class="strip">
<view class="color-ui" :style="'width:'+item.progress+'%'" :class="item.color"></view>
</view>
</view>
</view>
</template>
script
export default{
data(){
return{
list:[
{id:'1',title:"语文",progress:'20',color:'red'},
{id:'2',title:"数学",progress:'40',color:'yellow'},
{id:'3',title:"化学",progress:'30',color:'red'},
],
info:{
progress:66,
}
}
}
}css
.container{ padding: 20upx 20upx; }
.strip {
position: relative;
width: 100%;
height: 24upx;
color: rgba(80, 80, 80, 1);
background-color: #F5F5F5;
font-size: 28rpx;
line-height: 150%;
text-align: center;
margin-bottom: 12upx;
border-radius: 20upx;
}
.yellow {
height: 24upx;
color: rgba(80, 80, 80, 1);
background-color: #FA8C16;
border-radius: 20upx;
font-size: 28rpx;
line-height: 150%;
text-align: center;
}
.red {
height: 24upx;
color: rgba(80, 80, 80, 1);
background-color:#E02020;
border-radius: 20upx;
font-size: 28rpx;
line-height: 150%;
text-align: center;
}
.blue{
height: 24upx;
color: rgba(80, 80, 80, 1);
background-color:#008EF6;
border-radius: 20upx;
font-size: 28rpx;
line-height: 150%;
text-align: center;
}
发布时间：2022/03/24
发表评论