微信小程序实现步骤条-类似vantweapp

正如上图所示，我们要实现上面的需求，可以使用vant,但是在这是我们会发现vant-weapp不能实现上面的效果，因为vant-weapp对这个组件进行了二次封装，把vant里面的内容进行封装成了传入数组的形式进行数据展示，所以不能实现上面的效果，而其他的h5和uniapp这些都可以使用vant实现效果。我们就需要使用原生的css去实现上面的效果，或者用tdesign去实现。

  <van-collapse value="{{ activeNames }}" bind:change="onChange">
          <van-collapse-item name="1">
            <view slot="title">
                <view class="margin-right-10">处理流程</view>
            </view>
            <view class="stepBox">
              <view class="box">
                <view class="{{item.status ==='1' ? 'greenSigleStep' : 'sigleStep'}}" wx:for="{{steps}}" wx:for-item="item" wx:key="text">
                  <view class="topShelter" wx:if="{{item.first}}"></view>
                  <view class="gray" wx:if="{{item.status === '0'}}">
                    <van-icon name="more-o" size="30rpx"/>
                  </view>
                  <view class="green" wx:if="{{item.status === '1'}}">
                    <van-icon name="passed" size="30rpx" class="blue"/>
                  </view>
                  <view class="stepConBox">
                    <view>{{item.text}}</view>
                    <view class="timebox">{{ item.desc}}</view>
                    <view class="flex jc-between">
                      <view class="timebox">{{ item.plan }}</view>
                      <view class="grey">操作人：张三</view>
                    </view>
                  </view>
                  <view>备注：1111111111111</view>
                  <view class="bottomShelter" wx:if="{{item.end}}"></view>
                </view>
              </view>
            </view>
            <van-icon name="edit" class="flex jc-end font-size-17 margin-right-20"  bindtap="deal"/>

          </van-collapse-item>
        </van-collapse>

{
“navigationStyle”: “custom”,
“navigationBarTextStyle”: “white”,
“usingComponents”: {
“search-bar”: “/base-ui/ms-search-bar/index”,
“ms-add-btn”: “/base-ui/ms-add-btn/index”,
“van-tab”: “@vant/weapp/tab/index”,
“van-tabs”: “@vant/weapp/tabs/index”,
“ms-main-navbar”: “/base-ui/ms-main-navbar/index”,
“van-sticky”: “@vant/weapp/sticky/index”,
“van-icon”: “@vant/weapp/icon/index”,
“form-item”: “/components/form-item/index”,
“ms-button”: “/base-ui/ms-button/index”,
“ms-progress-bar”: “/base-ui/ms-progress-bar/index”,
“van-collapse”: “@vant/weapp/collapse/index”,
“van-collapse-item”: “@vant/weapp/collapse-item/index”,
“van-steps”: “@vant/weapp/steps/index”,
“van-dialog”: “@vant/weapp/dialog/index”
}
}

.stepBox {
  padding: 8rpx 32rpx 32rpx 16rpx;
}

.box {
  padding-left: 20rpx;
}

.stepsList {
  width: 100%;
}

.sigleStep {
  padding: 0 0 0 28rpx;
  border-left: 4rpx solid #c2c3c4;
  position: relative;
}

.greenSigleStep {
  padding: 0 0 0 28rpx;
  border-left: 4rpx solid #169BD5;
  position: relative;
}

.topShelter {
  width: 20rpx;
  height: 46rpx;
  background-color: #ffffff;
  position: absolute;
  left: -10rpx;
  top: 0;
  z-index: 1;
}

.bottomShelter {
  width: 20rpx;
  height: 122rpx;
  background-color: #ffffff;
  position: absolute;
  left: -10rpx;
  bottom: 0;
  z-index: 1;
}

.gray {
  position: absolute;
  top: 18rpx;
  left: -18rpx;
  z-index: 99;
  background-color: #fff;
}

.green {
  position: absolute;
  top: 18rpx;
  left: -14rpx;
  z-index: 2;
  background-color: #fff;
}

.stepConBox {
  padding: 20rpx 20rpx 20rpx 0;
  color: black;
  border-bottom: 1rpx solid #fafafa;
}

.timebox {
  margin-top: 8rpx;
}

button {
  width: 100% !important;
}

// pkg-sales-department/pages/productorder/productorderdetail/index.js
import Cache from "../../../../utils/cache.js";
import {
    STATUSBARHEIGHT,
    MENUBUTTONHEIGHT,
    NAVIGATIONBARHEIGHT,
    NAVIGATIONBARANDSTATUSBARHEIGHT,
    SAFEBOTTOM,
    SCREENHEIGHT
}
    from "../../../../constants/index"

Page({

    /**
     * 页面的初始数据
     */
    data: {
        activeNames: ['0'],
        SAFEBOTTOM: Cache.getCacheSync(STATUSBARHEIGHT),
        //状态栏高度
        statusBarHeight: Cache.getCacheSync(STATUSBARHEIGHT),
        //导航栏高度
        navigationBarHeight: Cache.getCacheSync(MENUBUTTONHEIGHT),
        //胶囊按钮的高度
        menuButtonHeight: Cache.getCacheSync(NAVIGATIONBARHEIGHT),
        //状态栏加导航栏高度
        navigationBarAndStatusBarHeight: Cache.getCacheSync(NAVIGATIONBARANDSTATUSBARHEIGHT),
        SCREENHEIGHT: Cache.getCacheSync(NAVIGATIONBARANDSTATUSBARHEIGHT),
        steps: [
          {
            text: '17:30',
            desc: "2022-07-12",
            plan: "创建订单",
            status: '1',
            first: true,
          },
          {
            text: '--:--',
            desc: "2022-07-12",
            plan: "销售审核",
            status: '1'
          },{
            text: '--:--',
            desc: "2022-07-12",
            plan: "生产安排",
            status: '0'
          },
          {
            text: '--:--',
            desc: "2022-07-12",
            plan: "确认配比",
            status: '0',
            end: true,
          }
        ],
        show:false
    },
    getUserInfo(event) {
      console.log(event.detail);
    },
  
    onClose() {
      this.setData({ show: false });
    },


    deal(){
       console.log("我点击了一下")
       this.setData({
         show:true
       })
    },
    onChange(event) {
        this.setData({
            activeNames: event.detail,
        });
    },

    copyadd() {
        wx.navigateTo({
            url: '/pkg-sales-department/pages/productorder/addoddorder/index',
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
     
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

上面是参考别人的进行修改，后面我自己去写这个，发现几行都可以写好上面的效果。净弄些花里胡哨的。无语

原生实现
使用tdesign组件实现上面
点击跳转