vue 实现div列表（宽高固定）上面删，下面加，加过渡效果,竖向文字跑马灯，横向文字跑马灯

效果图!

<template>
  <div class="container">
    <h4>js表格滚动(垂直)</h4>
    <div class="module">
      <div class="listModule" style="width:820px" ref="slider">
        <div :class="item.num1 % 2 == 0 ? 'tableList1':'tableList2'" v-for="(item,index) in tableList" :key="index" :ref="item.num1">
          <div class="tableItem">{{item.num1}}</div>
          <div class="tableItem">{{item.num2}}</div>
          <div class="tableItem">{{item.num3}}</div>
          <div class="tableItem">{{item.num4}}</div>
        </div>
      </div>
      <div class="overlary"></div>
    </div>
    <h4>css表格滚动(垂直)</h4>
    <div class="table-module">
      <div class="table-module-list" :class="isTableScroll ? 'table-module-list-itemScroll':''" v-for="(item,index) in tableList2" :key="index">
        <div class="table-module-list-item" :class="item.num1 % 2 == 0 ? 'table-module-list-item2':''">{{item.num1}}</div>
        <div class="table-module-list-item" :class="item.num1 % 2 == 0 ? 'table-module-list-item2':''">{{item.num2}}</div>
        <div class="table-module-list-item" :class="item.num1 % 2 == 0 ? 'table-module-list-item2':''">{{item.num3}}</div>
        <div class="table-module-list-item" :class="item.num1 % 2 == 0 ? 'table-module-list-item2':''">{{item.num4}}</div>
      </div>
    </div>
    <h4>css文字滚动(垂直)</h4>
    <div class="text-module">
      <div class="text-module-list" :class="isScroll ? 'text-module-list-itemScroll':''" v-for="(i,index) in textList" :key="index">
        <div class="text-module-list-item">{{i}}</div>
      </div>
    </div>
    <h4>js文字滚动(横向)</h4>
    <div class="my-outbox">
      <div class="my-inbox" ref='box'>
        <div class="my-list" v-for="(item,index) in sendVal" :key='index' ref='list'>
          <span class="my-uname"><i class="fa fa-bullhorn" aria-hidden="true" style="margin-right:10px"></i>{{item.detail}}</span>
        </div>
      </div>
    </div>
    <!-- <marquee scrollamount="3" class="paoMaDeng">
      <span class="font">温馨提示：当前气温较低，注意防寒保暖！</span>
    </marquee> -->
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableList:[
        {num1:1,num2:1,num3:1,num4:1},
        {num1:2,num2:2,num3:2,num4:2},
        {num1:3,num2:3,num3:3,num4:3},
        {num1:4,num2:4,num3:4,num4:4},
        {num1:5,num2:5,num3:5,num4:5},
        {num1:6,num2:6,num3:6,num4:6},
      ],
      tableList2:[
        {num1:1,num2:'a',num3:'a',num4:'a'},
        {num1:2,num2:'b',num3:'b',num4:'b'},
        {num1:3,num2:'c',num3:'c',num4:'c'},
        {num1:4,num2:'d',num3:'d',num4:'d'},
        {num1:5,num2:'e',num3:'e',num4:'e'},
        {num1:6,num2:'f',num3:'f',num4:'f'},
      ],
      textList:['滚动文字一','滚动文字二','滚动文字三','滚动文字四'],
      sendVal:[
        {name:'张三',detail: '跑起来~'},
        {name:'张三',detail: '跑起来跑起来~~'},
        {name:'张三',detail: '跑起来跑起来跑起来~~~'}
      ],
      textIndex:0,
      nums:6,
      timer:'',
      tableTimer:'',
      isTableScroll:false,
      textTimer:'',
      isScroll:false,
      // 定时器标识
      nowTime: null,
      // 每一个内容的宽度
      disArr: []
    }
  },
  mounted(){
    /** 关闭或刷新当前页面时做拦截提示 */
    let that = this
    window.onbeforeunload = function (e) {
      if(that.$route.fullPath == "/listSlider"){  // 注意这里要替换成自己的当前页面的路由
        e = e || window.event;
        // 兼容IE8和Firefox 4之前的版本
        if (e) {
          e.returnValue = '关闭提示';
        }
        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return '关闭提示';
      } else {
        window.onbeforeunload = null
      }
    };

    this.init()
    this.initTable()
    this.initText()
    // 横向滚动
    var item = this.$refs.list
    var len = this.sendVal.length
    var arr = []
    // 因为设置的margin值一样，所以取第一个就行。
    var margin = this.getMargin(item[0])
    for (var i = 0; i < len; i++) {
      arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
    }
    this.disArr = arr
    this.moveLeft()
    
  },
  methods:{
    // 控制滚动条滚动
    init(){
      this.timer = setInterval( ()=>{
        this.nums += 1
        let obj = {num1:this.nums,num2:this.nums,num3:this.nums,num4:this.nums}
        this.tableList.push(obj)
        let element = this.$refs.slider
        //  滚动到指定位置
        element.scrollTo({
            'top': 50,
            'behavior': 'smooth'
        })
        setTimeout(()=>{
          this.tableList.splice(0,1)
          element.scrollTop = 0
        },500)
      },3000)
    },
    // css滚动 每次滚动完成后将这条数据裁剪出来拼接在数组后面，实现循环滚动
    initTable(){
      this.tableTimer = setInterval( ()=>{
        this.isTableScroll = true;
        setTimeout( ()=>{
          let newObj = this.tableList2[0];
          this.tableList2.splice(0,1);
          this.tableList2.push(newObj)
          this.isTableScroll = false
        },1200)
      },3000)
    },
    // 文字垂直滚动
    initText(){
      this.textTimer = setInterval( ()=>{
        this.isScroll = true;
        setTimeout( ()=>{
          let newText = this.textList[0];
          this.textList.splice(0,1);
          this.textList.push(newText)
          this.isScroll = false
        },2000)
      },3500)
    },
    // 获取margin属性
    getMargin (obj) {
      let marg = window.getComputedStyle(obj, null)['margin-right']
      marg = marg.replace('px', '')
      return Number(marg)
    },
    // 移动的方法
    moveLeft () {
      let that = this
      let outbox = this.$refs.box
      // 初始位置  
      let startDis = 0
      this.nowTime = setInterval(()=> {
        startDis -= 0.5
        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
          // 每次移动完一个元素的距离，就把这个元素宽度裁剪出来再插入数组后面
          that.disArr.push(that.disArr.shift())
          // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
          that.sendVal.push(that.sendVal.shift())
          startDis = 0
        } 
        outbox.style = `transform: translateX(${startDis}px)`
      }, (1000 / 60))
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
    clearInterval(this.textTimer)
    clearInterval(this.nowTime)
    // 清除定时器标识
    this.nowTime = null
  }
}
</script>

<style scoped>
.container{
  margin-top: 50px;
  text-align: center;
  padding: 50px;
}
.module{
  width: 800px;
  overflow: hidden;
  height: 250px;
  /* margin-top: 250px;
  margin-left: 100px; */
  position: relative;
}
.module .overlary{
  position: absolute;
  width: 800px;
  height: 600px;
  top: 0;
  left: 0;
}
.listModule{
  height: 250px;
  overflow-y: auto;
}
.tableList1{
  background: #1296DB;
  color: #fff;
  display: flex;
}
.tableList2{
  background: pink;
  color: #fff;
  display: flex;
}
.tableItem{
  width: 180px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
/* 竖向表格滚动 */
.table-module{
  width: 1200px;
  height: 120px;
  background: #1296DB;
  overflow: hidden;
}
.table-module .table-module-list{
  background: #1296DB;
  display: flex;
}
.table-module .table-module-list2{
  background: pink;
}
.table-module .table-module-list .table-module-list-item{
  background: #1296DB;
  color: #fff;
  line-height: 40px;
  text-align: center;
  width: 300px;
}
.table-module .table-module-list .table-module-list-item2{
  background: pink;
}
.table-module .table-module-list-itemScroll{
  transform: translateY(-40px);
  transition: all 1.2s;
}
/* 竖向文字滚动 */
.text-module{
  width: 300px;
  height: 40px;
  background: #1296DB;
  overflow: hidden;
}
.text-module .text-module-list{
  background: #1296DB;
}
.text-module .text-module-list .text-module-list-item{
  background: #1296DB;
  color: #fff;
  line-height: 40px;
  text-align: center;
}
.text-module .text-module-list-itemScroll{
  transform: translateY(-40px);
  transition: all 2s;
}
/* 横向文字滚动 */
.my-outbox{
  /*color: #D7BC8D;*/
  overflow: hidden;
  color: #FFFFFF;
  height: 35px;
  /*background: #422b02;*/
  background: #1296DB;
}
.my-outbox .my-inbox{
  white-space: nowrap;
  
}
.my-outbox .my-inbox .my-list{
  margin-right: 25px;
  width: 100%;
  display: inline-block;
  font-size: 0.3rem;
  height: 40px;
  line-height: 35px;
}
.my-outbox .my-inbox .my-list .my-uname{
  color: #fff;
}
</style>