第微信小程序?qū)崿F(xiàn)時間軸特效本文實例為大家分享了微信小程序?qū)崿F(xiàn)時間軸特效的具體代碼，供大家參考，具體內(nèi)容如下

效果

wxml

view

viewwx:for="{{array}}"wx:key="Lsh"

style="background:url('../images/ba.png')repeat-y28.2%0;"

pstyle="background:url('../images/icon.png')no-repeat100%0;background-size:36rpx36rpx;"

{{item.CreateTime1}}text{{item.CreateTime}}/text/p

label由用戶text{{item.UserName}}/text提供，將”{{item.text1}}“修改為”{{item.text2}}“/label

/view

/view

view

view-THEEND-/view

/view

wxss

page{

margin:0;

padding:0;

background-color:#fff;

.timeLine{

margin:60rpx

0;

.on{

padding-bottom:30px;

display:flex;

width:100%;

.timeLineview:last-child{

padding-bottom:2rpx;

.timeLineview:first-child{

padding-top:50rpx;

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:30rpx50rpx30rpx50rpx;

}

Js

constapp=getApp();

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

array:[{

"CreateTime":"2025年03月19日",

"CreateTime1":"11:24:19",

"Lsh":"210319112419179022",

"UserName":"11",

"test1":"重新佩戴安全帶時失去平衡",

"test2":"重新佩戴安全帶時失去平衡"

"CreateTime":"2025年03月19日",

"CreateTime1":"11:24:19",

"Lsh":"210319112419179022",

"UserName":"11",

"test1":"重新佩戴安全帶時失去平衡",

"test2":"重新佩戴安全帶時失去平衡"

/**

*生命周期