快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)水平時間軸

更新時間：2022年05月22日 16:14:20 作者：gyuei

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平時間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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'>等待確認(rèn)費用</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;
?}
?/*圓點背景色變?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 () {

? },

? /**
?9. 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {

? }
})

最終效果如圖所示：