微信小程序实现Timeline时间线效果
更新时间：2022年05月23日 08:23:44 作者：包子源
这篇文章主要为大家详细介绍了微信小程序实现Timeline时间线效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现类似elementUI的Timeline时间线效果，自适应页面与文本
wxml代码：
<view class="box">
<view wx:for="{{list}}" wx:key="index" class="one">
<view class="onedot"></view>
<view wx:if="{{index!=list.length-1}}" class="oneline"></view>
<view class="onemain">
<view class="onemaintitle">{{item.time}}</view>
<view class="onemaincon">{{item.con}}</view>
</view>
</view>
</view>wxss代码：
.box {
padding: 30rpx;
}
.one {
position: relative;
padding-bottom: 40rpx;
}
.onedot {
left: -2rpx;
width: 24rpx;
height: 24rpx;
position: absolute;
background-color: #67c23a;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.oneline {
position: absolute;
left: 8rpx;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.onemain {
position: relative;
padding-left: 56rpx;
top: -6rpx;
}
.onemaintitle {
margin-bottom: 16rpx;
padding-top: 8rpx;
color: #909399;
line-height: 1;
font-size: 26rpx;
}
.onemaincon {
color: #303133;
}js代码：
data: {
list: [{
time: "2021-02-02 10:30:30",
con: "这是主要内容部分"
},{
time: "2021-02-02 10:30:30",
con: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分"
},{
time: "2021-02-02 10:30:30",
con: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分"
}]
},最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了TypeScript项目中是如何进行数据转换的,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
layui 框架的upload上传文件的data参数传到后端的方法
这篇文章主要介绍了layui框架的upload上传文件的data参数传到后端的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要为大家详细介绍了微信小程序实现答题倒计时，自定义计时器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
Javascript 更新 JavaScript 数组的 uniq 方法
2008-01-01
这篇文章主要给大家介绍了关于JavaScript惰性求值的一种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要介绍了CocosCreator系统事件是怎么产生及触发的，虽然内容不少，但是只要一点点抽丝剥茧，具体分析其内容，就会豁然开朗2021-04-04
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能...2006-11-11
这篇文章主要介绍了javascript获取指针的位置的方法,通过代码介绍了如何调用上面扩展函数 getMP() 捕获当前鼠标指针在文档中的位置，需要的朋友可以参考下2021-10-10
在javascript前端开发中js函数问题经常会被讨论，这个问题仁者见仁智者见智，下面通过示例代码给大家介绍js五大常见函数，感兴趣的朋友一起看看吧2018-03-03
js特效,页面下雪的小例子，需要的朋友可以参考一下2013-06-06
最新评论