微信小程序自定義步驟條/時間軸組件

 最近在做小程序，業務需求要在頁面上顯示步驟條，做完后封裝成組件，分享一下話不多說先上圖。

1.首先在小程序components目錄下新建一個名為Step的components。結構如下。

 

 直接貼組件代碼

step.wxml

<!--components/Step/step.wxml-->
<view class="ct-wx-step">
  <view class='ct-wx-cell-list' wx:key="{{item}}" wx:for="{{stepList}}">
    <view class='ct-wx-cell-point  {{item.status==0?"default":"piont-last"}} '></view>
    <view class='ct-wx-cell-line  {{item.status==1?"last":null}}'>
      <view class='ct-wx-cell-name'>{{item.name}}</view>
      <view class='ct-wx-cell-event'>{{item.event}}</view>
      <view class='ct-wx-cell-time'>{{item.time}}</view>
    </view>
  </view>
</view>

step.wxss

/* components/Step/step.wxss */
.ct-wx-step{
  /* 
  width: 96%;
  margin-left: 2%;
  box-shadow: 0px 2px 10px rgba(102, 102, 102, 0.09);
  border-radius: 6px; */
  background: #FFFFFF;
  padding: 12px 0px;
}
.ct-wx-cell-list{
  padding: 0 12px;
}
.ct-wx-cell-line{
  padding-left: 12px;
  color: #666666;
  font-size: 12px;
  margin-left: 5px;
  border-left: 1px solid #E4E4E4;
  height: auto; 
}
.last{
  color: #333333;
  border-left: 1px solid #FFB93F;
}
.default{
  background: #E4E4E4;
}
.piont-last{
  background: #FFB93F;
}
.ct-wx-cell-point{
  border-radius: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 1;
}

step.js

// components/Step/step.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //步驟條數據
    stepList:{
      type:Array,
      value:[
        {
          name:"名稱",
          event:"步驟內容",
          time:"2021-07-19：12:30:01",
          status:"0"
        }
      ]
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

4.step.json

{
  "component": true,
  "usingComponents": {}
}

2.到這一步組件已經寫好了，下面在頁面上引用，首先在需要引用的頁面json文件引用。

"usingComponents": {
    "ct-step": "/components/Step/step"
  },

3.在wxml里使用

<ct-step id="step" stepList="{{stepList}}">
  </ct-step>

 

 4.在js里配置，傳入數據，獲取組件

data: {
    stepList:[
      {
        name:"下單時間",
        event:"",
        time:"2021-07-19：12:30:01",
        status:"0"
      },
      {
        name:"支付時間",
        event:"微信小程序，微信支付10.00元",
        time:"2021-07-19：12:30:01",
        status:"0"
      },
      {
        name:"降鎖時間",
        event:"",
        time:"2021-07-19：12:30:01",
        status:"1"//status步驟條狀態。=1表示最后一條渲染不同樣式
      }
    ]
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.step = this.selectComponent("#step");
  },

5.到此全部結束。