How to implement the Mini Program Timeline component
This article mainly introduces "how to implement Mini Program Timeline components". In daily operation, I believe many people have doubts about how to implement Mini Program Timeline components. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to implement Mini Program Timeline components". Next, please follow the editor to study!
The scene is used for express node tracking, development, etc.
Main points 1.position layout
2.border-radius draws dots
3.moment formatting time, distinguishing between the format of the day (HH:mm) and the day before (YYYY-MM-DD HH:mm)
Wxml
{{item.time}} {{item.content}} wxss
/ * timeline * / / * external container * / .listview-container {margin: 10rpx 10rpx;} / * line style * / .playlog-item {display: flex;} / * timeline * / .playlog-item .dotline {width: 35px; position: relative;} / * vertical bar * / .playlog-item .dotline {width: 1px; height: 100%; background: # ccc; position: absolute; top: 0; left: 15px } / * Dot * / .playlog-item .dotline .dot {width: 11px; height: 11px; background: # 30ac63; position: absolute; top: 10px; left: 10px; border-radius: 50%;} / * timestamp * / .playlog-item .dotline .time {width: 100%; position: absolute; margin-top: 30px; z-index: 99; font-size: 12px; color: # 777; text-align center: } / * right body content * / .playlog-item .content {width: 100%; display: flex; flex-direction: column; border-bottom: 1px solid # ddd; margin: 3px 0;} / * chapter section * / .playlog-item .content .content {font-size: 30rpx; line-height: 68rpx; color: # 444; white-space: normal; padding-right: 10px;} / * course section * / .playlog-item .content .course {font-size: 28rpx Line-height: 56rpx; color: # 999;} js
Var moment = require ('. / moment.min'); / format order 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} at this point, the study of "how to implement Mini Program timeline components" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
