快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)Timeline時(shí)間線效果

更新時(shí)間：2022年05月23日 08:23:44 作者：包子源

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)Timeline時(shí)間線效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序?qū)崿F(xiàn)類似elementUI的Timeline時(shí)間線效果，自適應(yīng)頁(yè)面與文本

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)容部分"
? ? }]
? },

最終效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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