微信小程序实现水平时间轴
更新时间：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 () {
}
})最终效果如图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
项目前端的文件和后台开发分离，只要后台开发更新svn前端的js，css文件都会更新，以前引用的是一个js文件如AA.js，由于想在项目中引用jquery库，如果在每个文件的头部都引让他们从新写入这个jq文件不太可能2010-04-04
这篇文章主要介绍了原生JS 实现的input输入时表格过滤操作,结合实例形式分析了JavaScript基于页面元素遍历、运算、判断实现的表格过滤相关操作技巧,需要的朋友可以参考下2019-08-08
JavaScript 防抖debounce与节流thorttle
这篇文章主要介绍了JavaScript 防抖debounce与节流thorttle，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了JS数组中对象去重操作,涉及javascript数组对象遍历、比较、运算等相关操作技巧,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Web3.js查询以太币和代币余额以及转账,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
require.js配合插件text.js实现最简单的单页应用程序
这篇文章主要介绍了require.js配合插件text.js实现最简单的单页应用程序,需要的朋友可以参考下2016-07-07
本文主要介绍了TypeScript 类型断言的实现，有使用关键字as和标签<>两种方式，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
之前推荐过的移动端web组件库 Vant是Vue.js版本的,其对内承载了有赞所有核心业务,对外有十多万开发者在使用,一直是业界主流的移动端组件库之一,下面这篇文章主要给大家介绍了关于微信小程序Vant组件库的安装与使用的相关资料,需要的朋友可以参考下2022-09-09
下面小编就为大家带来一篇js中遍历Map对象的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论