您好,登錄后才能下訂單哦!
這篇文章主要講解了“微信小程序如何實現(xiàn)時間軸特效”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“微信小程序如何實現(xiàn)時間軸特效”吧!
效果
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({ /** * 頁面的初始數(shù)據(jù) */ 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":"重新佩戴安全帶時失去平衡" }] }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, })
感謝各位的閱讀,以上就是“微信小程序如何實現(xiàn)時間軸特效”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對微信小程序如何實現(xiàn)時間軸特效這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。