1、最近在开发小程序过程中遇到一个订单报修进度的需求，然后需要时间轴进行显示，实现完成之后感觉还阔以，来给大家分享交流一下，希望大家多多支持提出意见。

2、首先给出成品图。

2.1列表页 2.2 时间轴页

3、时间轴页面代码

<view class="page">

<view class='weui-cell-third'>

  <view class="page__title">

    <view class="gjimg">

    <image class="position" mode="asceptFit"  src="/pages/images/equrepair/gj.png" />

    </view>

     <view class="repairinfo"  >

      <view class="reminder" bindtap="toReminder" data-id="{{id}}" >催单</view>

     <view class="bxsb">

      <text>报修设备:{{equipmentname}}</text>

     </view>

     <view class="sbxh">

     <span>报修时间:{{applyRepairDate}}</span>

     </view>

       <view class="bxyy">

       <span>报修原因:{{errorDescription}}</span>

       </view>

     </view>

    <view>

    </view>

  </view>

   <view class="fgx"></view>

  <view class="wecentBor">

    <block wx:for="{{operationlog}}" wx:key="*this">

      <view class='weui-cell-list'>

        <view class='weui-cell-line'>

          <view class="cimg">

        <image class="checkimg" mode="asceptFit"  src="/pages/images/equrepair/check.png" />

          </view>

          <view class='weui-cell-time floarLeft'>{{item.operationtimeX}}</view>

          <view class='weui-cell-event floarLeft'>{{item.taskstatusX}}</view>

        </view>  

      </view>

    </block>

  </view>

</view>

</view>

4、时间轴页面wxss代码

page {

  height: 98%;

  background-color: #f5f5f5;

}

.weui-cell-third {

  min-height: 100%;

  background-color: #fff;

  margin: 3% 3% 0px 3%;

}

.page__title {

  padding: 16rpx;

  background-color: #ffffff;

  margin-bottom: 10rpx;

}

.page__title>view:first-child {

  text-align: center;

  font-size: 35rpx;

  color: #4da2fd;

  font-weight: 700;

}

.page__title>view:last-child {

  display: flex;

  justify-content: center;

  align-items: center;

  color: #999999;

}

.weui-cell-list {

  overflow: hidden;

  padding-left: 30rpx;

  padding-top: 20rpx;

}

.wecentBor {

  padding-top: 30rpx;

  background: #fff;

}

.weui-cell-line {

  margin-top: -19rpx;

  margin-left: 12px;

  float: left;

  border-left: 1px solid #4da2fd;

  min-height: 140rpx;

  margin-bottom: -1px;

  position: relative;

}

.weui-cell-list .cimg {

  position: absolute;

  left: -30rpx;

  /* top: 3.5rpx; */

  background-color: #ffffff;

  border: 0;

  display: flex;

  justify-content: center;

  align-items: center;

}

.checkimg {

  width: 60rpx;

  height: 60rpx;

  z-index: 100;

  padding-top: 8rpx;

  padding-bottom: 8rpx;

}

.weui-cell-time {

  float: left;

  font-size: 14px;

  padding-left: 65rpx;

  width: 100%;

  color: #999999;

}

.weui-cell-event {

  padding-left: 65rpx;

  padding-bottom: 30rpx;

  font-size: 14px;

  color: #787878;

}

.weui-cell-list:last-child .weui-cell-line {

  border: 0;

}

.gjimg {

  float: left;

  padding-top: 8%;

}

.position {

  height: 40px;

  width: 40px;

  display: flex;

  justify-content: center;

}

.repairinfo {

  padding-left: 16%;

  padding-top: 10rpx;

}

.repairinfo .bxsb {

  width: 80%;

  font-size: 15px;

  font-weight: 550;

}

.reminder {

  font-size: 14px;

  border: 1px solid #3699ff;

  padding: 2px 15px;

  border-radius: 15px;

  color: #e7f2fe;

  background-color: #3699ff;

  z-index: 999;

  position: absolute;

  left: 78%;

}

.repairinfo .sbxh {

  font-size: 13px;

  color: #6d6d6d;

  padding-top: 6rpx;

}

.repairinfo .bxyy {

  min-height: 50px;

  font-size: 13px;

  color: #6d6d6d;

  /*设置多行超出进行隐藏*/

  display: -webkit-box;

  word-break: break-all;

  text-overflow: ellipsis;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  /*设置超出三行进行隐藏*/

}

.fgx {

  border: 0.5px solid #f1f1f1;

}