用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 实用组件/插件 查看内容

小程序时间轴组件

小明 2018-11-12 16:01

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

预览

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:
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏