本文實例講述了微信小程序時間軸實現方法。分享給大家供大家參考，具體如下：

最近項目需要在頁面上做一個時間軸，又是第一次做，而且還是在小程序上，要知道小程序里面沒有ol/ul/li，看了好幾個例子，最后做出來了，開心呀！如圖：

做起來其實很簡單：一個時間軸包括一個圓圈（css實現圓圈或者找一個圓圈圖片）+一條線（css實現直線或者找一個直線的圖片)+內容

來看我的代碼（代碼很不規范，請忽略）：

wxml

<view class='weui-cell-third'> <view class="page__title"> <image class='page-image' src="/static/img/1.png" />工作動態</view> <block wx:for="{{axis}}" wx:key="*this"> <view class='weui-cell-list'>  <view class='weui-cell-circle'></view>  <view class='weui-cell-line'>  <view class='weui-cell-time'>{{item.time}}</view>  <view class='weui-cell-name'>{{item.name}}</view>  <view class='weui-cell-event'>{{item.event}}</view>  </view> </view> </block></view>

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-radius: 5px; width: 10px; height: 10px; border-color: blue;}.weui-cell-time{ /* width: 50px; */ float: left; font-size:14px; padding-left: 15px; width: 72px;}.weui-cell-event{ padding-top: 15px; padding-left: 15px;}.weui-cell-name{font-size:14px;height:23px;margin-left: 100px;}

js:

Page({axis:[  {  time:'2018-2-15',  name:'張三',  event:'垃圾太多'  },  {  time: '2018-2-15',  name: '王三',  event: '垃圾太多'  },  {  time: '2018-2-15',  name: '張三',  event: '垃圾太多'  },  {  time: '2018-2-15',  name: '張三',  event: '垃圾太多'  }, ]});

再看頁面，已經出來了，是不是很簡單

希望本文所述對大家微信小程序開發有所幫助。