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

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

{{item.name}}

或者：

待成交等待确认费用未付款

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.jsPage({/** 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 () {}})

最终效果如图所示：