微信小程序——时间轴的实现

做起来其实很简单：一个时间轴包括一个圆圈（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: '垃圾太多'
      },
 
    ]
});