小程序時(shí)間軸組件怎么實(shí)現(xiàn)

這篇文章主要介紹“小程序時(shí)間軸組件怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在小程序時(shí)間軸組件怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”小程序時(shí)間軸組件怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

場(chǎng)景

用于快遞節(jié)點(diǎn)跟蹤、發(fā)展歷程等

要點(diǎn)

1.position作布局 
2.border-radius畫(huà)圓點(diǎn) 
3.moment格式化時(shí)間，區(qū)分當(dāng)日(HH:mm)與前日的格式(YYYY-MM-DD HH:mm)

wxml

<view class="listview-container"><block wx:for="{{newsList}}" wx:key=""><view class="playlog-item" bindtap="itemTapped"><view class="dotline"><!-- 豎線(xiàn) --><view class="line"></view><!-- 圓點(diǎn) --><view class="dot"></view><!-- 時(shí)間戳 --></view><view class="content"><text class="course">{{item.time}}</text><text class="chapter">{{item.content}}</text></view></view><ad unit-id="adunit-5abb45645905fc90" wx:if="{{index % 5 == 4}}"></ad></block></view>

wxss

 /*時(shí)間軸*/   /*外部容器*/ .listview-container { margin: 10rpx 10rpx; }   /*行樣式*/ .playlog-item { display: flex; }   /*時(shí)間軸*/ .playlog-item .dotline { width: 35px; position: relative; }   /*豎線(xiàn)*/ .playlog-item .dotline .line { width: 1px; height: 100%; background: #ccc; position: absolute; top: 0; left: 15px; }   /*圓點(diǎn)*/ .playlog-item .dotline .dot { width: 11px; height: 11px; background: #30ac63; position: absolute; top: 10px; left: 10px; border-radius: 50%; }   /*時(shí)間戳*/ .playlog-item .dotline .time { width: 100%; position: absolute; margin-top: 30px; z-index: 99; font-size: 12px; color: #777; text-align: center; }   /*右側(cè)主體內(nèi)容*/ .playlog-item .content { width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid #ddd; margin: 3px 0; }   /*章節(jié)部分*/ .playlog-item .content .chapter { font-size: 30rpx; line-height: 68rpx; color: #444; white-space: normal; padding-right: 10px; }   /*課程部分*/ .playlog-item .content .course { font-size: 28rpx; line-height: 56rpx; color: #999; }

js

var moment = require('./moment.min');   // 格式化訂單 var formatNews = function (news) { return news.map(item => { var time = moment(item.postTime); var zero = moment().format('YYYY-MM-DD'); var after = moment(time).isAfter(zero); if (after) { item.time = moment(item.postTime).format('HH:mm'); } else { item.time = moment(item.postTime).format('YYYY-MM-DD HH:mm'); } return item; }); }   module.exports = { formatNews }

到此，關(guān)于“小程序時(shí)間軸組件怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！