微信小程序时间轴demo_微信小程序时间轴实现方法示例

本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考，具体如下：

最近项目需要在页面上做一个时间轴，又是第一次做，而且还是在小程序上，要知道小程序里面没有ol/ul/li，看了好几个例子，最后做出来了，开心呀！如图：

做起来其实很简单：一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容

来看我的代码(代码很不规范，请忽略)：

wxml

工作动态

{ {item.time}}

{ {item.name}}

{ {item.event}}

wxss:

.weui-cell-third{

background: #fff;

}

.weui-cell-list{

background: #fff;

margin: 5px 50px 5px 50px;

}

.weui-cell-line{

/* width: 100px; */

margin-left: 5px;

border-left: 1px solid #ddd;

height: 100px;

background: #fff

}

.weui-cell-circle{

border: 1px solid #000;

border-rad