用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

小程序时间轴组件

Rolan 2018-9-10 00:06

预览timeline.gif场景用于快递节点跟踪、发展历程等要点1.position作布局2.border-radius画圆点3.moment格式化时间,区分当日(HH:mm)与前日的格式(YYYY-MM-DD HH:mm)wxmlview class="listview-container" block wx:f ...

预览

timeline.gif

场景

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

要点

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. .listview-container {
  4. margin: 10rpx 10rpx;
  5. }
  6. /*行样式*/
  7. .playlog-item {
  8. display: flex;
  9. }
  10. /*时间轴*/
  11. .playlog-item .dotline {
  12. width: 35px;
  13. position: relative;
  14. }
  15. /*竖线*/
  16. .playlog-item .dotline .line {
  17. width: 1px;
  18. height: 100%;
  19. background: #ccc;
  20. position: absolute;
  21. top: 0;
  22. left: 15px;
  23. }
  24. /*圆点*/
  25. .playlog-item .dotline .dot {
  26. width: 11px;
  27. height: 11px;
  28. background: #30ac63;
  29. position: absolute;
  30. top: 10px;
  31. left: 10px;
  32. border-radius: 50%;
  33. }
  34. /*时间戳*/
  35. .playlog-item .dotline .time {
  36. width: 100%;
  37. position: absolute;
  38. margin-top: 30px;
  39. z-index: 99;
  40. font-size: 12px;
  41. color: #777;
  42. text-align: center;
  43. }
  44. /*右侧主体内容*/
  45. .playlog-item .content {
  46. width: 100%;
  47. display: flex;
  48. flex-direction: column;
  49. border-bottom: 1px solid #ddd;
  50. margin: 3px 0;
  51. }
  52. /*章节部分*/
  53. .playlog-item .content .chapter {
  54. font-size: 30rpx;
  55. line-height: 68rpx;
  56. color: #444;
  57. white-space: normal;
  58. padding-right: 10px;
  59. }
  60. /*课程部分*/
  61. .playlog-item .content .course {
  62. font-size: 28rpx;
  63. line-height: 56rpx;
  64. color: #999;
  65. }

js

  1. var moment = require('./moment.min');
  2. // 格式化订单
  3. var formatNews = function (news) {
  4. return news.map(item => {
  5. var time = moment(item.postTime);
  6. var zero = moment().format('YYYY-MM-DD');
  7. var after = moment(time).isAfter(zero);
  8. if (after) {
  9. item.time = moment(item.postTime).format('HH:mm');
  10. } else {
  11. item.time = moment(item.postTime).format('YYYY-MM-DD HH:mm');
  12. }
  13. return item;
  14. });
  15. }
  16. module.exports = {
  17. formatNews
  18. }


源码下载 


关注订阅号【黄秀杰】或扫一扫下方二维码,回复关键字115

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 黄秀杰 来自: 黄秀杰

相关阅读