vue项目中利用css实现简单的时间轴

需求

竖直方向上是一栏时间轴（显示时分秒），水平方向上可以选择时间(日期)，且可以横向滑动.

实现

竖向

先写一个大的div，包含整个卡片的内容，里面有一张圆点图片，一条时间线，还有里面的时间信息，图片文字信息。
时间线的思路是：利用css 中border边框来显示，如果要加入动态效果，比如改变颜色，可以通过JS或者hover属性来切换这条线的颜色。
实现的效果图：

html:

<div class="message">
    <div class="circle"><img src="../../../static/icon/main.png" alt=""></div><span class="time">{{item.time}}</span>
    <div class="lineborder">
      <img src="../../../static/icon/main.png" alt="">
      <!--<p>text</p>-->
    </div>
  </div>

CSS：

.message{
    display: block;
    width: 100%;
    height: 450rpx;
  }
  .circle{
    margin-left: 28rpx;
    margin-right: 50rpx;
    display: block;
    height: 50rpx;
    width: 50rpx;
    float: left;
  }
  .lineborder{
    margin-left: 50rpx;
    display: block;
    height: 400rpx;
    width: 100%;
    left: 200rpx;
    border-left: 5rpx solid #999999;
  }
  .lineborder img{
    display: block;
    width: 200rpx;
    height: 300rpx;
    margin:0 auto;
  }
  .lineborder p{
    margin-left:80rpx ;
  }
  .circle img{
    max-width:100%;
    max-height:100%;
  }

完成单个卡片之后，使用v-for进行循环

<div class="message" v-for="item in timeAxis2">
    <div class="circle"><img src="../../../static/icon/main.png" alt=""></div><span class="time">{{item.time}}</span>
    <div class="lineborder">
      <img src="../../../static/icon/main.png" alt="">
      <!--<p>text</p>-->
    </div>
  </div>

最后的效果：

横向

效果图：

思路

该功能跟上文的竖向一样，也是通过图片+边框线的形式完成的，加了一个点击图片显示日期的功能呢，然后用了微信小程序的scroll-view组件，来实现滑动的效果。具体代码如下：

html

<scroll-view class="scrollView" scroll-x="true" scroll-with-animation="true">
      <div class="scrollBack" v-for="(item,index)  in timeAxis1"  >
        <img src="../../../static/icon/main.png" alt="" @click="showIt(index)">
        <div class="nav">
        <p v-show="item.showTime">{{item.time}}</p>
        </div>
      </div>
    </scroll-view>

html的具体思路是通过一个大的div包裹里面的图片元素，线元素和文字元素，通过CSS进行排版。然后用V-for进行循环显示。

css

.scrollView{
    display:block;
    width:100%;
    height:140rpx;
    overflow:hidden;
    white-space:nowrap;
    margin-left:30rpx;
  }
  .scrollBack{
    display:inline-block;
    height:100rpx;
    width:50%;
    margin-right:50rpx;
  }
  .nav{
    margin-top:30rpx;
    display:inline-block;
    height:55rpx;
    width:50%;
    border-top:5rpx solid #999999;
    font-size:45rpx;
    position:absolute;
  }
  .scrollBack img{
    display:inline-block;
    width:50rpx;
    height:50rpx;
    margin-bottom:-12rpx
  }
  .scrollBack p{
    margin: 0 auto;
  }

1. 排版过程中线与图像不对齐：设置图像display属性为inline-block，设置margin-bottom来对齐时间线。

2. 文字隐藏时，上面的图像和线会掉下来：暂时还未解决，用了个取巧的办法，把文字放到时间线的div框里，就可以正常显示不会改变其他元素的位置。

JS

timeAxis1: [
          {time: '8月10日', showTime: false},
          {time: '8月11日', showTime: true},
          {time: '8月12日', showTime: false},
          {time: '8月13日', showTime: false},
          {time: '8月14日', showTime: false}
        ]
  showIt (index) {
        this.timeAxis1[index].showTime = !this.timeAxis1[index].showTime
      },

用于微信小程序不能直接操作DOM，所以在timeAxis中设置了多个showTime，用来监听每个日期的显示，用户点击图像，便会显示日期，再点击一次，程序取反然后便可以隐藏日期。