微信小程序如何实现流畅的水平时间轴功能？

本文共计888个文字，预计阅读时间需要4分钟。

本文将分享一个微信小程序实现水平时间轴的具体代码示例。以下内容供大家参考学习：

1. 整体代码如下：

2021-01-01 活动1 2021-02-01 活动2 2021-03-01 活动3

2. WXML部分代码如下：

{{item.date}} {{item.event}}

以上代码实现了水平时间轴的展示，其中：

- `wehx-line-box` 是时间轴的容器，可以自定义样式。- `weui-flex__item wehx-line-item` 是时间轴的每个项目，可以根据需要自定义样式。- `wx:for` 是用于循环渲染时间轴的项目，`ax` 是一个包含日期和事件的数组。

请根据实际需求修改数组内容和样式，以达到所需的效果。

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

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

最终效果如图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。