2022-01-20 vant steps组件 流程反向（从下到上）显示

      
        
          {{ item.progressName }}
        
      

  data() {
    return {
      nowProcess: 0, //当前进度下标
      processList: [
        { no: '01', progressName: '提交成功（待核定）' },
        { no: '02', progressName: '生育津贴核定（待核定审核）' },
        { no: '03', progressName: '生育津贴核定审核（待提交财务）' },
        { no: '04', progressName: '生成支付计划（待财务审核）' },
        { no: '05', progressName: '财务审核（待财务审核）' },
        { no: '06', progressName: '财务复核（待拨付）' },
        { no: '07', progressName: '资金拨付（拨付状态）' },
      ], //进度列表
    }
  },

按照官方默认这样写步骤只会从上到下显示效果：

我们想让顺序从下到上显示，但是这个组件并没有提供反向显示的属性

我们可以利用flex的排列取反flex-direction: column-reverse;然后重新修改样式即可，部分样式为调整，可自行取舍

// 让步骤条从尾部至头部的顺序反向显示
/deep/ .van-steps {
  display: flex;
  justify-content: center;
  .van-step--vertical {
    padding: 0.26667rem 0.26667rem 18px 0;
  }
  .van-steps__items {
    display: flex;
    flex-direction: column-reverse;
  }
  .van-step--vertical .van-step__line {
    top: -17.5px;
    left: -15.5px;
    height: 28px;
  }
  .van-step--vertical:first-child::before {
    background-color: unset;
  }
  .van-icon-checked::before {
    content: '';
    width: 10px;
    height: 10px;
    background: @gradient_blue_color_2;
    border-radius: 8px;
    margin-left: 2.8px;
    margin-top: 2.8px;
  }
  .van-step__icon--active {
    color: @gradient_blue_color_2;
    width: 16px;
    height: 16px;
    background: rgba(64, 119, 244, 0.2);
    border-radius: 8px;
  }
  .van-step--finish .van-step__circle {
    width: 10px;
    height: 10px;
    background: @gradient_blue_color_2;
  }
  .van-step__circle {
    width: 10px;
    height: 10px;
    background: #dcdee0;
  }
  .van-step__title--active {
    color: @main_text_color !important;
  }
  [class*='van-hairline']::after {
    border: unset;
  }
}

效果图（从下到上显示）：