这篇文章主要为大家详细介绍了微信小程序实现Timeline时间线效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现类似elementUI的Timeline时间线效果，自适应页面与文本
wxml代码：
{{item.time}} {{item.con}}
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: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分" }] },最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是微信小程序实现Timeline时间线效果的详细内容，更多请关注0133技术站其它相关文章！
