效果

代码

调用

    <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.datalet locOptions = JSON.parse(JSON.stringify(options))let opsLen = locOptions.lengthfor (let i = 0; i <= active; i++) {locOptions[i].active = truelocOptions[i].left = truelocOptions[i].right = true}locOptions[0].edgeClass= 'step-first'locOptions[opsLen-1].edgeClass= 'step-last'if (opsLen === 1) {locOptions[0].left = falselocOptions[0].right = false} else if (opsLen > 1) {locOptions[0].left = falselocOptions[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--);
}