微信小程序实现流程进度样式

wxml：

<view class="step">
  <view class="progress">
    <view class="step_box step_box1">
      <view class="radius rad_1 radius_active"></view>
      <view class="step_title">基本信息</view>
    </view>
    <view class="step_box step_box2">
      <view class="radius rad_2 "></view>
      <view class="step_title">项目信息</view>
    </view>
    <view class="step_box step_box3">
      <view class="radius rad_3 "></view>
      <view class="step_title">需求信息</view>
    </view>
    <progress percent="{{percent}}" activeColor="#F86221" backgroundColor="#E0E2E7" stroke-width="2" class="pro_border" />
  </view>
</view>

wxss:

.step{
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-bottom: 16rpx;
  padding-bottom: 20rpx;
}
/* progress */
.progress{
  width:70%;
  height: 60rpx;
  /* margin:auto; */
  position: relative;
  display: -webkit-flex;
  align-items: center;
}
.progress .pro_border{
  width:100%;
}
.step_box{
  position: absolute;
  top: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: -30px;
}
.pro_border{
  height: 4rpx;
}
.progress .radius{
  /* position: absolute; */
  width:40rpx;
  height: 40rpx;
  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;
}
.step_box1{
  left:0;
}
.step_box2{
  left:50%;
}
.step_box3{
  right:0;
  margin-right: -30px;
}
.step_title{
  font-size: 28rpx;
  margin-top: 10rpx;
}

js:

data:{
	//percent:0    percent:50   percent:100
    percent: 0,
}

最后

以上就是悦耳发夹为你收集整理的微信小程序实现流程进度样式的全部内容，希望文章能够帮你解决微信小程序实现流程进度样式所遇到的程序开发问题。

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