最近專案需要在頁面上做一個時間軸，又是第一次做，而且還是在小程式上，要知道小程式裡面沒有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: '垃圾太多'
      },

    ]
});
 

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