小程序时间轴组件如何实现,小程序时间轴组件demo

以下这篇小程序时间轴组件为大家从用于场景，及实现要点，以及小程序时间轴组件demo几个部分组成

场景

用于快递节点跟踪、发展历程等

要点

1.position作布局 
2.border-radius画圆点 
3.moment格式化时间，区分当日(HH:mm)与前日的格式(YYYY-MM-DD HH:mm)

wxml

1. <view class="listview-container">
2. <block wx:for="{{newsList}}" wx:key="">
3. <view class="playlog-item" bindtap="itemTapped">
4. <view class="dotline">
5. <!-- 竖线 -->
6. <view class="line"></view>
7. <!-- 圆点 -->
8. <view class="dot"></view>
9. <!-- 时间戳 -->
10. </view>
11. <view class="content">
12. <text class="course">{{item.time}}</text>
13. <text class="chapter">{{item.content}}</text>
14. </view>
15. </view>
16. <ad unit-id="adunit-5abb45645905fc90" wx:if="{{index % 5 == 4}}"></ad>
17. </block></view>

wxss

1.  
2. /*时间轴*/
3.  
4.  
5.  
6. /*外部容器*/
7.  
8. .listview-container {
9.  
10. margin: 10rpx 10rpx;
11.  
12. }
13.  
14.  
15.  
16. /*行样式*/
17.  
18. .playlog-item {
19.  
20. display: flex;
21.  
22. }
23.  
24.  
25.  
26. /*时间轴*/
27.  
28. .playlog-item .dotline {
29.  
30. width: 35px;
31.  
32. position: relative;
33.  
34. }
35.  
36.  
37.  
38. /*竖线*/
39.  
40. .playlog-item .dotline .line {
41.  
42. width: 1px;
43.  
44. height: 100%;
45.  
46. background: #ccc;
47.  
48. position: absolute;
49.  
50. top: 0;
51.  
52. left: 15px;
53.  
54. }
55.  
56.  
57.  
58. /*圆点*/
59.  
60. .playlog-item .dotline .dot {
61.  
62. width: 11px;
63.  
64. height: 11px;
65.  
66. background: #30ac63;
67.  
68. position: absolute;
69.  
70. top: 10px;
71.  
72. left: 10px;
73.  
74. border-radius: 50%;
75.  
76. }
77.  
78.  
79.  
80. /*时间戳*/
81.  
82. .playlog-item .dotline .time {
83.  
84. width: 100%;
85.  
86. position: absolute;
87.  
88. margin-top: 30px;
89.  
90. z-index: 99;
91.  
92. font-size: 12px;
93.  
94. color: #777;
95.  
96. text-align: center;
97.  
98. }
99.  
100.  
101.  
102. /*右侧主体内容*/
103.  
104. .playlog-item .content {
105.  
106. width: 100%;
107.  
108. display: flex;
109.  
110. flex-direction: column;
111.  
112. border-bottom: 1px solid #ddd;
113.  
114. margin: 3px 0;
115.  
116. }
117.  
118.  
119.  
120. /*章节部分*/
121.  
122. .playlog-item .content .chapter {
123.  
124. font-size: 30rpx;
125.  
126. line-height: 68rpx;
127.  
128. color: #444;
129.  
130. white-space: normal;
131.  
132. padding-right: 10px;
133.  
134. }
135.  
136.  
137.  
138. /*课程部分*/
139.  
140. .playlog-item .content .course {
141.  
142. font-size: 28rpx;
143.  
144. line-height: 56rpx;
145.  
146. color: #999;
147.  
148. }

js

1. var moment = require('./moment.min');
2.  
3.  
4.  
5. // 格式化订单
6.  
7. var formatNews = function (news) {
8.  
9. return news.map(item => {
10.  
11. var time = moment(item.postTime);
12.  
13. var zero = moment().format('YYYY-MM-DD');
14.  
15. var after = moment(time).isAfter(zero);
16.  
17. if (after) {
18.  
19. item.time = moment(item.postTime).format('HH:mm');
20.  
21. } else {
22.  
23. item.time = moment(item.postTime).format('YYYY-MM-DD HH:mm');
24.  
25. }
26.  
27. return item;
28.  
29. });
30.  
31. }
32.  
33.  
34.  
35. module.exports = {
36.  
37. formatNews
38.  
39. }