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

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

最后

以上就是稳重羽毛为你收集整理的小程序实现流程进度条功能的全部内容，希望文章能够帮你解决小程序实现流程进度条功能所遇到的程序开发问题。

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