小程序实现流程进度条功能

最新推荐文章于 2024-10-02 19:37:19 发布

陨石猎人

最新推荐文章于 2024-10-02 19:37:19 发布

阅读量4.2k

点赞数

分类专栏：微信小程序文章标签：小程序实现流程进度条功能

本文链接：https://blog.csdn.net/qq_42205731/article/details/84402007

版权

微信小程序专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<view class="progress">
      <view class="radius rad_1 radius_active">1</view>
      <view class="radius rad_2 radius_active">2</view>
      <view class="radius rad_3">3</view>
      <progress percent="50" activeColor="#F86221" backgroundColor="#E0E2E7" stroke-width="4" class="pro_border"/>
    </view>

/* progress */
.edit_content .progress{
  width:494rpx;
  height: 60rpx;
  margin:auto;
  position: relative;
  display: -webkit-flex;
  align-items: center;
}
.progress .pro_border{
  width:100%;
}
.progress .radius{
  position: absolute;
  width:60rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 50%;
  background: #E0E2E7;
  font-family: PingFangSC-Semibold;
  font-size: 30rpx;
  color: #737586;
  text-align:center;
  top:0;
}
.progress .radius_active{
  background: #F86221;
  color:#fff;
}
.progress .rad_1{
  left:0;
}
.progress .rad_2{
  left:217rpx;
}
.progress .rad_3{
  right:0;
}