自定义滚动条

效果图：

 时间这一列进行上下滚动循环。

<div id="map-container"></div>是用来加载地图的。此图片悬浮在地图右上角。

 <div id="map-container">
      <div class="wrn">告警列表</div>
      <div id="list" class="marquee_list" :class="{marquee_top:animate}">
        <div class="liItem" v-for="(item,index) in alarmList" :key="index">
          <div class="top2">
            <div class="item_each">{{item.startTime}}</div>
          </div>
        </div>
      </div>
    </div>

  </div>

:class="{marquee_top:animate}"

这里为什么这么写，请移步这里：

https://cn.vuejs.org/v2/guide/class-and-style.html

data：

  data() {
      return {
        animate: false,
      }
    },

style：

 
 #grad1 {
//背景图片加载
    background: url(../../../assets/wrnbackgrpound.png) no-repeat;
//z-index和position并用，实现图片悬浮在地图之上
    z-index: 999;
    position: fixed;
    display: block;
    top: 10;
    right: 0;
    width: 324px;
    height: 453px;
  }
.marquee_list {
    position: relative;
    overflow: hidden;
    height: 333px;
  }
.marquee_top {
    transition: all 0.5s;
    margin-top: -84px;
  }

//实现上下滚动 
scroll() {
        const self = this;
        self.animate = true;
        setTimeout(() => {
          self.alarmList.push(self.alarmList[0]); // 将数组的第一个元素添加到数组的
          self.alarmList.shift(); //删除数组的第一个元素
          self.animate = false;
        }, 500)
      },
      //调接口
      listDeviceWrn() {
        listDeviceWrn().then(res => {
          if (res.code === 200 && res.rows) {
            this.alarmList = res.rows;
          }
        });

      },