欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序實現(xiàn)Timeline時間線效果

 更新時間：2022年05月23日 08:23:44   作者：包子源  
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)Timeline時間線效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序實現(xiàn)類似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: "這是主要內容部分這是主要內容部分這是主要內容部分這是主要內容部分"
? ? }]
? },

最終效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論