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

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

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

来看我的代码（代码很不规范，请忽略):

页面结构

view class=' weui-cell-third ' view class=' page _ _ title ' image class=' page-image ' src=' http :/static/img/1。png‘/工作动态/view block wx : for=' { { axis } } ' wx : key=' * this ' view class=' weui-cell-list ' view class=' weui-cell-circle '/view class=' weui-cell-line ' view class=' weui-cell-time ' { item。time } }/view view class=' weui-cell-name ' { item。name } }/view view view class=' weui-cell-event ' { item。事件} }/视图/视图/视图/视图。weui-cell-第三{背景： # fff}.weui-cell-list { background : # fff；margin: 5px 50px 5px 50px}。weui-cell-line {/* width : 100 px；*/边距-左侧： 5px边框-左侧： 1px实心# ddd高度： 100像素；背景： #fff} .weui-cell-circle {边框： 1px实线# 000;边界半径： 5px宽度： 10px高度： 10px边框-颜色：蓝色；}.weui-cell-time {/* width : 50px；*/float:左侧；font-size :14 px左衬垫左侧： 15px宽度： 72px}.weui-cell-event { padding-top : 15px；左衬垫left: 15px}。weui-cell-name { font-size :14 px；高度：23px左边距： 100像素；}js:

页面({ axis :[{ time : ' 2018-2-15 '，名称： '张三，event: '垃圾太多}，{ time: '2018-2-15 '，名称： '王三，event: '垃圾太多}，{ time: '2018-2-15 '，名称： '张三，event: '垃圾太多}，{ time: '2018-2-15 '，名称： '张三，event: '垃圾太多' }, ]});再看页面，已经出来了，是不是很简单

希望本文所述对大家微信小程序开发有所帮助。