微信小程序實現Timeline時間線效果
微信小程序實現類似elementUI的Timeline時間線效果，自適應頁面與文本
wxml代碼：
<view class="box">
<view wx:for="{{list}}" wx:key="index" class="one">
<view class="onedot"></view>
<view wx:if="{{index!=list.length-1}}" class="oneline"></view>
<view class="onemain">
<view class="onemaintitle">{{item.time}}</view>
<view class="onemaincon">{{item.con}}</view>
</view>
</view>
</view>
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: "這是主要內容部分這是主要內容部分這是主要內容部分這是主要內容部分"
}]
},
最終效果：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。