uniapp任务进度条css样式实现

最新推荐文章于 2024-01-09 21:58:20 发布

小布丁儿Y

最新推荐文章于 2024-01-09 21:58:20 发布

阅读量633

点赞数

文章标签： uni-app Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_48931415/article/details/129332773

版权

用惯了组件到自己去实现一些东西会手忙脚乱我也是看了其他博主的文章参考实现的

通过css控制进度当前进度/总进度*100

<view class="progressBox">
      <view class="progress-wrap">
<!-- 进度条的百分比 -->
          <view class="progress" :style="'width:'+(0/10)*100+'%'"></view>
      </view>
     <view class="percentage em">0</view>
     <view class="percentage">/10</view>
 </view>

.progressBox{
        display: flex;
    }
    .progress-wrap {
        width: 150rpx;
        height: 8rpx;
        background: #FEEDEC;
        border-radius: 20rpx;
        overflow: hidden;
        position: relative;
        margin-top: 14rpx;
    }

    .progress {
        height: 30rpx;
        background-color: #F84B3C;
    }

    .percentage {
        font-size: 22rpx;
        color: #000000 ;
    }
    .percentage.em{
        font-size: 22rpx;
        color: #F84B3C;
        margin-left: 16rpx;
    }

样式可自行修改