小程序实现封装自定义步骤条组件

本文中步骤条组件的实现使用了小程序原生的进度条控件来实现步骤进度情况，具体代码如下：

<!--components/custom-steps/index.wxml-->
<view class="my-steps">
  <view class="my-step">
    <view class="my-step-progress">
      <progress percent="{{progressPercent}}" stroke-width="4rpx" backgroundColor="#EEEEEE" activeColor="#E3CD8E" />
    </view>
    <view class="my-steps-status">
      <view class="my-steps-status-item" wx:for="{{steps}}" wx:key="index">
        <view class="my-steps-status-item-wrap" wx:if="{{item.status === 'inactive'}}">
          <view class="my-steps-status-item-inactive"></view>
        </view>
        <view class="my-steps-status-item-wrap my-steps-status-item-pending" wx:if="{{item.status === 'pending'}}">
          <view class="pending-inner-circle"></view>
        </view>
        <view class="my-steps-status-item-wrap" wx:if="{{item.status === 'active'}}">
          <view class="my-steps-status-item-active"></view>
        </view>
      </view>
    </view>
  </view>
  <view class="my-steps-tips">
    <view class="my-step-item" wx:for="{{steps}}" wx:key="index">{{item.text}}</view>
  </view>
</view>

/* components/custom-steps/index.wxss */
.my-step{
  position: relative;
  width: 90%;
  height: 28rpx;
  margin: auto;
  margin-top: 30rpx;
}

.my-step-progress{
  position: absolute;
  top: 50%;
  width: 100%;
}

.my-steps-status{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.my-steps-status-item-wrap{
  position: absolute;
  width: 28rpx;
  height: 28rpx;
}

.my-steps-status-item-inactive,.pending-inner-circle,.my-steps-status-item-active,.my-steps-status-item-active::before{
  position: absolute;
  top: 50%;
  left: 50%;
}

.my-steps-status-item-inactive,.pending-inner-circle,.my-steps-status-item-active{
  background: #E3CD8E;
  border-radius: 50%;
}

.my-steps-status-item .my-steps-status-item-inactive{
  width: 16rpx;
  height: 16rpx;
  margin-left: -8rpx;
  margin-top: -8rpx;
}

.my-steps-status-item:first-child .my-steps-status-item-inactive,.my-steps-status-item:last-child .my-steps-status-item-inactive{
  margin-left: -16rpx;
}

.my-steps-status-item .my-steps-status-item-pending{
  background: rgba(197,175,111,0.5);
  border-radius: 50%;
}

.pending-inner-circle{
  width: 12rpx;
  height: 12rpx;
  background: #C5AF6F;
  margin-left: -6rpx;
  margin-top: -6rpx;
  z-index: 9;
}

.my-steps-status-item-active{
  width: 24rpx;
  height: 24rpx;
  margin-left: -12rpx;
  margin-top: -12rpx;
}

.my-steps-status-item-active::before{
  content: '';
  transform: translate(-50%, -65%) rotate(45deg);
  width: 6rpx;
  height: 12rpx;
  border-bottom: 2rpx solid #fff;
  border-right: 2rpx solid #fff;
  z-index: 9;
}

.my-steps-tips{
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.my-steps-tips .my-step-item{
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 34rpx;
}

// components/custom-steps/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    steps: {
      type: Array,
      value: []
    },
    active: Number
  },
  
  /**
   * 组件的初始数据
   */
  data: {
    progressPercent: 0
  },

  attached() {
    const { steps, active } = this.data
    const progressPercent = this.computeProgressPercent(steps, active)
    this.setData({ progressPercent })
  },

  /** 组件监听 */
  observers: {
    'steps, active': function(newSteps, newActive) {
      const progressPercent = this.computeProgressPercent(newSteps, newActive)
      this.setData({ progressPercent })
    }
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    /** 根据传入的步骤控制进度条的占比 */
    computeProgressPercent(steps, active){
      const stepsLen = steps.length - 1
      console.log(stepsLen, active);
      return  Math.round(100 / (stepsLen * 2)) * active * 2
    }
  }
})

页面或其他组件中引用

<!--pages/my-steps/index.wxml-->
<view>步骤条</view>
<custom-steps steps="{{steps}}" active="{{active}}"></custom-steps>

// pages/zxm-steps/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    steps: [
      {
        text: '提交申请',
        status: 'active'
      },
      {
        text: '商家处理',
        status: 'pending'
      },
      {
        text: '商家退款',
        status: 'inactive'
      },
      {
        text: '退款成功',
        status: 'inactive'
      },
    ],
    active: 1
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    setTimeout(() => {
      this.setData({
        steps: [
          {
            text: '提交申请',
            status: 'active'
          },
          {
            text: '商家处理',
            status: 'pending'
          },
          {
            text: '商家退款',
            status: 'inactive'
          },
          {
            text: '退款成功',
            status: 'inactive'
          },
        ],
        active: 0.5
      })
    },3000)
  },
})

// pages/zxm-steps/index.json
{
  "usingComponents": {
    "custom-steps": "/components/custom-steps/custom-steps"
  }
}

更多小程序示例可访问我的码云