微信小程序原生横向步骤条steps

效果

代码

调用

    <rug-step options="{{steps}}" active="{{stepActive}}"></rug-step>

 steps: [
        { label: '步骤1' },
        { label: '步骤步骤步骤步骤2' },
        { label: '步骤3' },
        { label: '步骤步骤步骤步骤步骤4' },
        { label: '步骤4' },
        { label: '步骤4' },
        { label: '步骤步骤步骤步骤4' },
        { label: '步骤步骤步骤步骤步骤步骤4' },
],
stepActive: 3,

Component js

Component({
  options: {
    addGlobalClass: true,
    virtualHost: true,
    multipleSlots: true
  },
  properties: {
    options: { type: null, value: [] },
    active: { type: null, value: 0 },
    color:{type:String,value:'#F8C822'},
  },
  data: {
    locOptions: []
  },
  observers: {
    options(data) {
      this.setOptions()
    },
    active(data) {
      this.setOptions()
    }
  },
  lifetimes: {},
  methods: {
    setOptions() {
      const { options, active } = this.data
      let locOptions = JSON.parse(JSON.stringify(options))
      let opsLen = locOptions.length
      for (let i = 0; i <= active; i++) {
        locOptions[i].active = true
        locOptions[i].left = true
        locOptions[i].right = true
      }
      locOptions[0].edgeClass= 'step-first'
      locOptions[opsLen-1].edgeClass= 'step-last'

      if (opsLen === 1) {
        locOptions[0].left = false
        locOptions[0].right = false
      } else if (opsLen > 1) {
        locOptions[0].left = false
        locOptions[active].right = false
      }
      this.setData({
        locOptions:locOptions
      })
    }
  }
})

Component wxml

<view class="step" style="--c--:{{color}}">
    <block wx:for="{{locOptions}}" wx:key="value">
        <view class="step-item {{item.edgeClass}} {{item.active?'active':''}}">
            {{item.label}}
            <view class="step-dot" style="--index--:'{{index+1}}'"/>
            <view class="step-line step-line-left {{item.left?'show':'hide'}}" />
            <view class="step-line step-line-right {{item.right?'show':'hide'}}"/>
        </view>
    </block>
</view>

Component wxss

.step {
    white-space: nowrap;
    overflow-x: scroll;
    padding:8px 4px;
}

.step-item {
    position: relative;
    display: inline-block;
    padding: 20px 8px 8px;
}

.step-item .step-dot {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color:#969799;
    font-size: 12px;
    background:#e2e2e2;
    border-radius: 100%;
}

.step-line {
    position: absolute;
    width: calc(50% - 6px);
    height: 2px;
    top: 9px;
    display: block;
    background: #e2e2e2;
}
.step-line-left {
    left: 0
}

.step-line-right {
    right: 0;
}

.step-first .step-line-left,
.step-last .step-line-right{
    display: none;
}


.step-line.show,
.step-item.active .step-dot{
    background: var(--c--);
}


.step-item.active .step-dot:after {
    content: '';
    width: 10px;
    height: 5px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-right: 0;
    border-top: 0;
    transform:rotate(-45deg) scale(.8);
}
.step-item .step-dot:after {
    content:var(--index--);
}