微信小程序自定义步骤条/时间轴组件

 最近在做小程序，业务需求要在页面上显示步骤条，做完后封装成组件，分享一下话不多说先上图。

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.到此全部结束。