返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

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

2018-09-11 作者:秩名

以下这篇小程序时间轴组件为大家从用于场景,及实现要点,以及小程序时间轴组件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. }

 

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用