微信小程序?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 web網(wǎng)頁(yè)入門級(jí)開發(fā)詳解
Web框架正如前文所述, 在整個(gè)項(xiàng)目結(jié)構(gòu)中處于一個(gè)承上啟下的位置, 是整個(gè)項(xiàng)目的核心組件, 所以這次來聊聊Web框架的一些普適性特性和如何快速的入門2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue指令的鉤子函數(shù)使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
我們?cè)趀charts表中經(jīng)常會(huì)出現(xiàn)X軸的信息顯示不完全的情況,所以本文小編給大家介紹了echarts X軸顯示不全的處理方法,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01
本文主要介紹了js字符串分割處理的幾種方法，主要介紹了6種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript輸出所選擇起始與結(jié)束日期的方法
這篇文章主要介紹了JavaScript輸出所選擇起始與結(jié)束日期的方法,涉及javascript結(jié)合HTML5元素操作日期運(yùn)算的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07
JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例,也可說是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下2014-08-08
下面小編就為大家?guī)硪黄猨s調(diào)用屏幕寬度的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
微信小程序 動(dòng)態(tài)修改頁(yè)面數(shù)據(jù)及參數(shù)傳遞過程詳解
這篇文章主要介紹了微信小程序 動(dòng)態(tài)修改頁(yè)面數(shù)據(jù)及參數(shù)傳遞過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
使用element-ui的upload組件上傳代碼包時(shí)遇到的問題小結(jié)
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時(shí)遇到的問題及總結(jié),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12