微信小程序?qū)崿F(xiàn)時(shí)間軸特效
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)時(shí)間軸特效的具體代碼,供大家參考,具體內(nèi)容如下
效果
wxml
<view class="timeLine" style=" width: 100%;"> ? <view class="on" wx:for="{{array}}" wx:key="Lsh" ? ? style="background:url('../images/ba.png') repeat-y 28.2% 0;"> ? ? <p class="p" style="background: url('../images/icon.png') no-repeat 100% 0;background-size: 36rpx 36rpx;"> ? ? ? {{item.CreateTime1}}<text class="text">{{item.CreateTime}}</text></p> ? ? <label class="con" >由用戶(hù)<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({ ? /** ? ?* 頁(yè)面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? array:[{ ? ? "CreateTime":"2021年03月19日", ? ? "CreateTime1":"11:24:19", ? ? "Lsh":"210319112419179022", ? ? "UserName":"11", ? ? "test1":"重新佩戴安全帶時(shí)失去平衡", ? ? "test2":"重新佩戴安全帶時(shí)失去平衡" },{ ? ? "CreateTime":"2021年03月19日", ? ? "CreateTime1":"11:24:19", ? ? "Lsh":"210319112419179022", ? ? "UserName":"11", ? ? "test1":"重新佩戴安全帶時(shí)失去平衡", ? ? "test2":"重新佩戴安全帶時(shí)失去平衡" }] ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 ? ?*/ ? onLoad: function (options) { ? }, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Layui事件監(jiān)聽(tīng)的實(shí)現(xiàn)(表單和數(shù)據(jù)表格)
這篇文章主要介紹了Layui事件監(jiān)聽(tīng)的實(shí)現(xiàn)(表單和數(shù)據(jù)表格),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10JS動(dòng)態(tài)添加選項(xiàng)案例分析
這篇文章主要介紹了JS動(dòng)態(tài)添加選項(xiàng)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-10-10Postman動(dòng)態(tài)獲取返回值過(guò)程詳解
這篇文章主要介紹了Postman動(dòng)態(tài)獲取返回值過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06js實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物網(wǎng)站商品放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript判斷手機(jī)號(hào)運(yùn)營(yíng)商是移動(dòng)、聯(lián)通、電信還是其他(代碼簡(jiǎn)單)
本文由腳本之家小編給大家分享的基于js判斷手機(jī)號(hào)運(yùn)行商是移動(dòng)、聯(lián)通、電信還是其他的,然后根據(jù)不同的運(yùn)營(yíng)商做出對(duì)應(yīng)的處理,感興趣的朋友一起學(xué)習(xí)吧2015-09-09