微信小程序之步骤条（Steps）

一、效果图及简介：

（1）没完成的灰色小圆点表示
（2）完成的使用绿色小圆点设表示
（3）完成的最后一个步骤用代√的小圆点表示

二、实现思路：

（1）progress进度条：
开发文档查看属性：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
（2）view圆点样式：
wxml：

<view class='{{Steps==index?"steps":Steps<index?"steps3":"steps2"}}'></view>

wxss：

.steps{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: rgb(25, 185, 3);
  text-align: center;
}

三、素材图片下载：

四、实现代码：

wxml:

<view class="steps_box">
  <progress percent="{{Steps*percent}}"  class="progress" stroke-width="3" color="rgb(25, 185, 3)" backgroundColor="rgb(185, 187, 190)" 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/order_icon.png" class="steps_img"></image>
      </view>
      <view class="{{Steps>=index?'steps_wenzi':'steps_wenzi2'}}" >{{StepsList[index]}}</view>
    </view>
  </view>
</view>

wxss:

/* 步骤条 */
page{
  background-color: rgb(190, 236, 238);
}
.steps_box{
  margin-top: 200rpx;
  width: 90%;
  margin: auto;
  background-color: white;
  height: 200rpx;
  position:relative;
}
.progress{
  margin: auto;
  margin-top: 75rpx;
}
.steps_all{
  width: 100%;
  position: absolute;
  right: 0;
  top: 50rpx;
  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;
}
.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: 35rpx;
  height: 35rpx;
  border-radius: 50rpx;
  background-color: rgb(25, 185, 3);
  text-align: center;
}
.steps3{
  width: 35rpx;
  height: 35rpx;
  border-radius: 50rpx;
  background-color: rgb(185, 187, 190);
  text-align: center;
}
.steps_wenzi{
  margin-top: 40rpx;
  font-size: 25rpx;
}
.steps_wenzi2{
  margin-top: 40rpx;
  font-size: 25rpx;
  color: rgb(112, 113, 114);
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //设置当前完成步数
    Steps:2,

  // 当步骤为五步时步骤名不可超过五个汉字
    StepsList: ["第一步", "第二步", "第三步", "第四步", "第五步"],
  //步骤为五步时
    progress:80,
    percent:25,
  // //步骤为四步时
  //   progress: 75,
  //   percent: 33,
  // //步骤为三步时
  //   progress: 67,
  //   percent: 50,
  },

})