微信小程序如何實(shí)現(xiàn)水平時(shí)間軸

這篇文章主要介紹“微信小程序如何實(shí)現(xiàn)水平時(shí)間軸”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序如何實(shí)現(xiàn)水平時(shí)間軸”文章能幫助大家解決問(wèn)題。

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' ></view>
            <view class="dot {{item.finished?'dotActive':''}}"></view>
            <view class='line' ></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' ></view>
            <view class="dot {{item.finished?'dotActive':''}}"></view>
            <view class='line' ></view>
        </view>
    </view>
    <view class="weui-flex__item wehx-line-item">
        <view class='line-name'>等待確認(rèn)費(fèi)用</view>
        <view class='weui-cell-list'>
            <view class='line' ></view>
            <view class="dot {{item.finished?'dotActive':''}}"></view>
            <view class='line' ></view>
        </view>
    </view>
    <view class="weui-flex__item wehx-line-item">
        <view class='line-name'>未付款</view>
        <view class='weui-cell-list'>
            <view class='line' ></view>
            <view class="dot {{item.finished?'dotActive':''}}"></view>
            <view class='line' ></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;
 }
 /*圓點(diǎn)背景色變?yōu)樗{(lán)色****** */
 .dotActive{
  background: #2ea7e0;
 }
 .line-name{
  font-size:30rpx;
 }

Js部分代碼如下所示：

// pages/market/detail/detail.js
Page({

  /**
 1. 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    axis:[
      {
        name:'待成交',
      star:'none',
      end: '#d5d8dd',
      },
      {
        name: '等待確認(rèn)費(fèi)用',
      star:'#d5d8dd',
      end: '#d5d8dd',
      },
      {
        name: '未付款',
      star:'#d5d8dd',
      end: 'none',
      },
     ]
  },

  /**
 2. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {

  },

  /**
 3. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function () {

  },

  /**
 4. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {

  },

  /**
 5. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function () {

  },

  /**
 6. 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function () {

  },

  /**
 7. 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

  /**
 8. 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
 9. 用戶(hù)點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

最終效果如圖所示：

關(guān)于“微信小程序如何實(shí)現(xiàn)水平時(shí)間軸”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。