本文实例为大家分享了微信小程序实现水平时间轴的具体代码,供大家参考,具体内容如下
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 () { } })
最终效果如图所示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。