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

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

1、wxml部分代码如下：

view

viewwx:for="{{axis}}"wx:key="*this"

view{{}}/view

view

view/view

viewclass="dot{{item.finished'dotActive':''}}"/view

view/view

/view

/view

/view

或者：

view

view

view待成交/view

view

view/view

viewclass="dot{{item.finished'dotActive':''}}"/view

view/view

/view

/view

view

view等待确认费用/view

view

view/view

viewclass="dot{{item.finished'dotActive':''}}"/view

view/view

/view

/view

view

view未付款/view

view

view/view

viewclass="dot{{item.finished'dotActive':''}}"/view

view/view

/view

/view

/view

wxss部分代码如下：

.wehx-line-box{

display:flex;

height:90rpx;

border-top:1rpxdashed#e5e5e5;

padding:30rpx0;

.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(){