微信小程序自定义步骤条

你秃头了吗.

已于 2023-06-30 18:36:37 修改

阅读量525

点赞数

文章标签：微信小程序小程序

于 2023-06-30 18:19:24 首次发布

本文链接：https://blog.csdn.net/m0_59180188/article/details/131482002

版权

steps.wxml 文件

<view class="steps_box">

    <block class="block-step" wx:for="{{stepList}}">

      <view class="view_item">

        <icon wx:if="{{stepNum>=index+1?true:false}}" type="success" color="#3475b9" size="20" />

        <view wx:else> {{index+1}} </view><text style="color:{{stepNum>=index+1?'#3475b9':'#b6b6b6'}}">{{item.name}}</text>

      </view>

      <view wx:if="{{index==stepList.length-1?false:true}}" class="view_line {{stepNum<=index+1?'line_bgcolor1':'line_bgcolor'}} "></view>

    </block>

  </view>

  <view class="yh-btn active-btn" catchtap="numSteps" >下一步</view>

steps.js文件

  data: {

    stepList: [{

      name: '第一步'

    }, {

      name: '第二步'

    }, {

      name: '第三步'

    }, {

      name: '第四步'

    }, ],

    stepNum: 1, //当前的步数

  },

  numSteps() {

    this.setData({

      stepNum: this.data.stepNum == this.data.stepList.length ? 1 : this.data.stepNum + 1

    })

  },

steps.json 文件

（无操作）

steps.wxss 文件

.yh-btn {

  border-radius: 10rpx;

  background: #3475b9;

  color: #fff;

  font-size: 30rpx;

  text-align: center;

  padding: 15rpx 0;

  margin: 20rpx;

  letter-spacing: 2rpx;

}

.active-btn:active {

  box-shadow: 0px 0px 10px #bbbec4 inset;

}

/* 步骤条 */

.steps_box {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 20rpx;

}

.block-step {

  display: flex;

  flex-direction: row;

  /* align-items: center;

  justify-content: center; */

}

.view_item {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

.view_item text {

  font-size: 28rpx;

  margin-top: 20rpx;

  /* color: #909090; */

}

.view_item view {

  width: 36rpx;

  height: 36rpx;

  /* background-color: red; */

  border: 2rpx solid #b6b6b6;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #b6b6b6;

  font-size: 24rpx;

  content: "\e732";

}

.view_line {

  width: 15%;

  height: 2rpx;

  margin: 0rpx 2% 52rpx 0;

  background: linear-gradient(to right, #d3d2d3, #5fe7ff);

}

.line_bgcolor1 {

  background-color: #e0e0e0;

}

.line_bgcolor {

  background: linear-gradient(to right, #5fe7ff, #3475b9);

}