Wechat アプレット ネイティブの水平ステップ バーのステップ

効果

コード

移行

    <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,

コンポーネント 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
      })
    }
  }
})

コンポーネント 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>

コンポーネント 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--);
}