微信小程序时间轴demo_小程序时间轴组件

预览

timeline.gif

场景

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

要点

1.position作布局

2.border-radius画圆点

3.moment格式化时间，区分当日(HH:mm)与前日的格式(YYYY-MM-DD HH:mm)

wxml

{ {item.time}}

{ {item.content}}

wxss

/*时间轴*/

/*外部容器*/

.listview-container {

margin: 10rpx 10rpx;

}

/*行样式*/

.playlog-item {

display: flex;

}

/*时间轴*/

.playlog-item .dotline {

width: 35px;

position: relative;

}

/*竖线*/

.playlog-item .dotline .line {

width: 1px;

height: 100%;

background: #ccc;

position: absolute;

top: 0;

left: 15px;

}

/*圆点*/

.playlog-item .dotline .dot {

width: 11px;

height: