微信小程序?qū)崿F(xiàn)Timeline時間線效果
更新時間：2022年05月23日 08:23:44 作者：包子源
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)Timeline時間線效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
微信小程序?qū)崿F(xiàn)類似elementUI的Timeline時間線效果，自適應(yīng)頁面與文本
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: "這是主要內(nèi)容部分"
? ? },{
? ? ? time: "2021-02-02 10:30:30",
? ? ? con: "這是主要內(nèi)容部分這是主要內(nèi)容部分這是主要內(nèi)容部分這是主要內(nèi)容部分這是主要內(nèi)容部分"
? ? },{
? ? ? time: "2021-02-02 10:30:30",
? ? ? con: "這是主要內(nèi)容部分這是主要內(nèi)容部分這是主要內(nèi)容部分這是主要內(nèi)容部分"
? ? }]
? },最終效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript replace()正則替換實現(xiàn)代碼
javascript-replace()基礎(chǔ)，一次完成將"<,>"替換"<>"實例2010-02-02
手機(jī)圖片滑動切換，網(wǎng)上有很多這樣的例子，但都借助于其他組件，讓代碼混亂的不行，本例介紹的是無css3元素純js腳本編寫的wap圖片滾動特效2014-08-08
這篇文章主要給大家愛介紹了關(guān)于利用Javascript獲取選擇文本所在的句子的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。本文給大家介紹Bootstrap 組件之按鈕的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
bootstrap日期插件daterangepicker使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap日期插件daterangepicker的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
使用documentElement正確取得當(dāng)前可見區(qū)域的大小
如何取得當(dāng)前瀏覽器里面可見區(qū)域的大??？其他方法都不適用，只有documentElement才可以,需要的朋友可以參考下2014-07-07
JavaScript 是屬于網(wǎng)絡(luò)的腳本語言。本文是小編日常收集整理些javascript入門基礎(chǔ)知識，對js新手朋友非常有幫助，對js入門知識點感興趣的朋友一起學(xué)習(xí)吧2016-03-03
js中常見的4種創(chuàng)建對象方式與優(yōu)缺點
不管是哪門語言,千變?nèi)f化不離其宗,深入理解其本質(zhì),方能應(yīng)用自如,下面這篇文章主要給大家介紹了關(guān)于js中常見的4種創(chuàng)建對象方式與優(yōu)缺點,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
考慮到 JS 中的錯誤可比服務(wù)器端的代碼產(chǎn)生的錯誤要多得多，并且還難以發(fā)現(xiàn)及修正，所以 JS 代碼必須有異常處理以及全局一場處理。2015-06-06