微信小程序实现水平时间轴

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

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

  }
})

最终效果如图所示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。

原文地址:https://blog.csdn.net/gyueh/article/details/105680085