微信小程序实现水平时间轴
更新时间：2022年05月22日 16:14:20 作者：gyuei
这篇文章主要为大家详细介绍了微信小程序实现水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现水平时间轴的具体代码，供大家参考，具体内容如下
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 () {
}
})最终效果如图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
写js脚本时经常会用到一些拼写函数的情况，例如调用setTimeout...查了很长时间，为什么就是弹不出对话框呢，使用闭包就可完全避免了2013-07-07
javascript window.confirm确认 取消对话框实现代码小结
本文章讲述的三种都是基于了javascript confirm提示确认框的做法了，只是在不同的地方写哦，有需要的同学可参考一下2012-10-10
这篇文章主要为大家详细介绍了JS面向对象之多选框实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
Bootstrap+jfinal退出系统弹出确认框的实现方法
这篇文章主要为大家详细介绍了Bootstrap+jfinal退出系统弹出框的实现方法，感兴趣的小伙伴们可以参考一下2016-05-05
UEditor支持单图、多图以及视频上传，编辑器配置项支持文件格式、文件大小校验，对于文件宽高尺寸校验暂不支持。本文给大家介绍UEditor 自定义图片视频尺寸校验功能的实现代码，感兴趣的朋友一起看看吧2020-10-10
本文主要介绍了svg实现的动态描边效果，文中分享了两个实例：1.一个简单的线一点一点画出来的效果；2.用同样的原理画一个“蓝胖子”。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
JavaScript使用Blob文件流下载txt、pdf、图片等文件，自定义下载文件名
JavaScript使用Blob文件流下载txt、pdf、图片等格式文件,同时自定义下载文件名,2023-08-08
这篇文章主要为大家详细介绍了js+css实现三级导航菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了javascript原型链和继承的概念，以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用，是篇非常不错的文章，这里推荐给大家。2014-09-09
这篇文章主要给大家介绍了关于JS实现超级好看的鼠标小尾巴特效的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论