小程序-分3步进度

示意图

第一步.png
第二步.png
第三步.png

wxml

<!--  自定义步数组件  -->
    <view class="steps_box">
        <progress percent="{{Steps*percent}}" class="progress" stroke-width="2" color="rgb(25, 185, 3)"  style="width:{{progress}}%" />
        <view class="steps_all">
            <view class="steps_one_box" wx:for="{{StepsList}}" wx:key="index">
                <view class='{{Steps==index?"steps":Steps<index?"steps3":"steps2"}}'>
                    <image wx:if="{{Steps==index}}" src="../../images/success.png" class="steps_img"></image>
                </view>
                <view class="{{Steps>=index?'steps_wenzi':'steps_wenzi2'}}">{{StepsList[index]}}</view>
            </view>
        </view>
    </view>

js

Component({
      /*组件的属性列表*/
    properties: {
      steps_index:{
        type:Number,
        value:''
      }
    },
    /* 页面的初始数据 */
    data: {
      //设置当前完成步数
      Steps:0,
    // 当步骤为3步时步骤名不可超过3个汉字
      StepsList: ["第一步", "第二步", "第三步"],
        //步骤为三步时
        progress:70,
        percent:50,
    },
  })
 

json

{
  "component": true,
  "usingComponents": {}
}

wxss

/* 步骤条 */
.steps_box{
  width: 90%;
  margin: 0 auto;
  position:relative;
}
.progress{
  margin: auto;
  margin-top: 60rpx;
}
.steps_all{
  width: 100%;
  position: absolute;
  right: 0;
  top: 38rpx;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.steps_one_box{
  height: 100%;
  width: 20%;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  line-height: 62rpx;
}
.steps{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: rgb(25, 185, 3);
  text-align: center;
}
.steps_img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.steps2{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50rpx;
  background-color: rgb(25, 185, 3);
  text-align: center;
  margin: 4rpx 0;
}
.steps3{
  width: 40rpx;
  height: 40rpx;
  margin: 4rpx 0;
  border-radius: 50rpx;
  background-color: rgb(185, 187, 190);
  text-align: center;
}
.steps_wenzi{
  font-size: 25rpx;
  color:rgb(25, 185, 3);
}
.steps_wenzi2{
  font-size: 25rpx;
  color: #A0A0A0;
}

images

success.png