小程序自定义步骤条实现

小张很嚣张～2023-07-25 9:05

效果展示：

支持背景颜色自定义

javascript 复制代码

<view class="hl_steps">
  <view class="hl_steps_item" wx:for="{{steps}}" wx:key="id">
    <view class="hl_steps_item_circle_out" style="background-color: {{color[index%color.length][0]}};">
      <view class="hl_steps_item_circle_in" style="background-color: {{color[index%color.length][1]}};">
      </view>
    </view>
    <view class="hl_steps_item_box" style="background-color: {{color[index%color.length][0]}};">
      <view class="step_item_line" style="border-color: {{color[index%color.length][1]}};">
      </view>
      <view class="hl_steps_item_title">
        {{item.title}}
      </view>
      <view class="hl_steps_item_desc">
        {{item.desc}}
      </view>
    </view>
  </view>
</view>

css 复制代码

.hl_steps{
  overflow: hidden;
}

.hl_steps_item {
  display: flex;
  margin: 30rpx;
  box-sizing: border-box;
  position: relative;
}

.hl_steps_item_circle_out {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hl_steps_item_circle_in {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.hl_steps_item_box {
  box-sizing: border-box;
  width: 100%;
  margin-left: 20rpx;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  position: relative;
}

.step_item_line {
  height: 100%;
  position: absolute;
  left: -42rpx;
  top: 38rpx;
  border-left: 2rpx dashed;
}

.hl_steps_item:nth-last-of-type(1) .step_item_line {
  border: none;
}

.hl_steps_item_title {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #363A44;
  line-height: 40rpx;
}

.hl_steps_item_desc {
  margin-top: 10rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #363A44;
  line-height: 40rpx;
}

javascript 复制代码

// components/bottom-pop/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    color: {
      type: Array,
      value: [
        ["rgba(254, 192, 48, .2)", "rgba(254, 192, 48, 1)"],
        ["rgba(147, 165, 164, .2)", "rgba(147, 165, 164, 1)"],
        ["rgba(0, 78, 204, .2)", "rgba(0, 78, 204, 1)"],
        ["rgba(79, 192, 141, .2)", "rgba(79, 192, 141, 1)"],
      ]
    },
    steps: {
      type: Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isIphoneX: false,
    animationData: {}
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  pageLifetimes: {
    show: function () {
      // 页面被展示
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  },
})