微信小程序实现水平时间轴

本文实例为大家分享了微信小程序实现水平时间轴的具体代码，供大家参考，具体内容如下

1、wxml部分代码如下：

<view class="wehx-line-box">
 <view class="weui-flex__item wehx-line-item" wx:for="{{axis}}" wx:key="*this">
  <view class='line-name'>{{item.name}}</view>
  <view class='weui-cell-list'>
   <view class='line' style="background:{{item.star}}"></view>
   <view class="dot {{item.finished'dotActive':''}}"></view>
   <view class='line' style="background:{{item.end}}"></view>
  </view>
 </view>
</view>

或者：

<view class="wehx-line-box">
 <view class="weui-flex__item wehx-line-item">
  <view class='line-name'>待成交</view>
  <view class='weui-cell-list'>
   <view class='line' style="background:none;"></view>
   <view class="dot {{item.finished'dotActive':''}}"></view>
   <view class='line' style="background:{{item.end}}"></view>
  </view>
 </view>
 <view class="weui-flex__item wehx-line-item">
  <view class='line-name'>等待确认费用</view>
  <view class='weui-cell-list'>
   <view class='line' style="background:{{item.star}}"></view>
   <view class="dot {{item.finished'dotActive':''}}"></view>
   <view class='line' style="background:{{item.end}}"></view>
  </view>
 </view>
 <view class="weui-flex__item wehx-line-item">
  <view class='line-name'>未付款</view>
  <view class='weui-cell-list'>
   <view class='line' style="background:{{item.star}}"></view>
   <view class="dot {{item.finished'dotActive':''}}"></view>
   <view class='line' style="background:none;"></view>
  </view>
 </view>
</view>

wxss部分代码如下：

.wehx-line-box{
 display: flex;
 height: 90rpx;
 border-top: 1rpx dashed #e5e5e5;
 padding: 30rpx 0;
}
.wehx-line-item{
 display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.weui-cell-list{
 display:flex;align-items:center;justify-content:space-between;width:100%;
}
.line{
width:43%;
 height:2rpx;
 background: #d5d8dd;
}
.dot{
 border-radius: 50%;
 width: 10px;
 height: 10px;
 margin-right: 4rpx;
 background: #d5d8dd;
}
/*圆点背景色变为蓝色****** */
.dotActive{
 background: #2ea7e0;
}
.line-name{
 font-size:30rpx;
}

Js部分代码如下所示：

// pages/market/detail/detail.js
Page({

 /**
1. 页面的初始数据
 */
 data: {
  axis:[
   {
    name:'待成交',
   star:'none',
   end: '#d5d8dd',
   },
   {
    name: '等待确认费用',
   star:'#d5d8dd',
   end: '#d5d8dd',
   },
   {
    name: '未付款',
   star:'#d5d8dd',
   end: 'none',
   },
  ]
 },

 /**
2. 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

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

 },

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

 },

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

 },

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

 },

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

 },

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

 },

 /**
9. 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

最终效果如图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。