第微信小程序?qū)崿F(xiàn)水平時間軸本文實例為大家分享了微信小程序?qū)崿F(xiàn)水平時間軸的具體代碼，供大家參考，具體內(nèi)容如下

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等待確認(rèn)費用/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;

/*圓點背景色變?yōu)樗{(lán)色*******/

.dotActive{

background:#2ea7e0;

.line-name{

font-size:30rpx;

}

Js部分代碼如下所示：

//pages/market/detail/detail.js

Page({

/**

1.頁面的初始數(shù)據(jù)

*/

data:{

axis:[

{

name:'待成交',

star:'none',

end:'#d5d8dd',

},

{

name:'等待確認(rèn)費用',

star:'#d5d8dd',

end:'#d5d8dd',

},

{

name:'未付款',

star:'#d5d8dd',

end:'none',

},

]

/**

2.生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

/**

3.生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady:function(){

/**

4.生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow:function(){

/**

5.生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide:function(){

/**

6.生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload:function(){

/**

7.頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh:function(){

/**

8.頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom:function(){