这篇文章主要讲解了“微信小程序如何实现时间轴特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何实现时间轴特效”吧!
效果
wxml
<view class="timeLine" >
<view class="on" wx:for="{{array}}" wx:key="Lsh"
>
<p class="p" >
{{item.CreateTime1}}<text class="text">{{item.CreateTime}}</text></p>
<label class="con" >由用户<text class="name"> {{item.UserName}} </text>提供,将 ”{{item.text1}}“ 修改为 ”{{item.text2}}“ </label>
</view>
</view>
<view class="END">
<view>- THE END -</view>
</view>
wxss
page {
margin: 0;
padding: 0;
background-color: #fff;
}
.timeLine {
margin: 60rpx 0;
}
.on {
padding-bottom: 30px;
display: flex;
width: 100%;
}
.timeLine view:last-child {
padding-bottom: 2rpx;
}
.timeLine view:first-child {
padding-top: 50rpx;
}
.p {
width: 24%;
font-size: 32rpx;
font-weight: 300;
text-align: right;
padding-right: 50rpx;
color: #377FFC;
}
.text {
display: block;
color: #9BBFFD;
font-size: 12px;
}
.con {
display: inline-block;
padding-left: 30rpx;
width: calc(100% - 300rpx);
font-weight: 300;
font-size: 28rpx;
}
.name{
font-weight: 400;
}
.END {
text-align: center;
font-size: 24rpx;
color: #999;
padding: 30rpx 50rpx 30rpx 50rpx;
}
Js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
array:[{
"CreateTime":"2021年03月19日",
"CreateTime1":"11:24:19",
"Lsh":"210319112419179022",
"UserName":"11",
"test1":"重新佩戴安全带时失去平衡",
"test2":"重新佩戴安全带时失去平衡"
},{
"CreateTime":"2021年03月19日",
"CreateTime1":"11:24:19",
"Lsh":"210319112419179022",
"UserName":"11",
"test1":"重新佩戴安全带时失去平衡",
"test2":"重新佩戴安全带时失去平衡"
}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
感谢各位的阅读,以上就是“微信小程序如何实现时间轴特效”的内容了,经过本文的学习后,相信大家对微信小程序如何实现时间轴特效这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。