微信小程序實現水平時間軸
本文實例為大傢分享瞭微信小程序實現水平時間軸的具體代碼，供大傢參考，具體內容如下
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 () {
}
})
最終效果如圖所示：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。