vue项目实现表格定时滚动

1.拖动元素实现

原理:全部数据渲染出来,只展示规定的几条数据,配合css隐藏掉多余的部分,js通过定时器将需要拖动的元素向上拖动.当数据拖动到最后一条时回到最初的位置继续操作,其中scrollTop是每次拖动的步长.

代码块:

<script>
export default {
  data () {
    return {
      scrollTop: 0,
    }
  },
  created () {
    this.myScroll = setInterval(this.scrollUp, 1000); //开启一个定时器
  },
  methods: {
    //表格滚动
    scrollUp () {
      //找到要滚动的元素节点
      let v = document.getElementsByClassName("ant-table-body")[0];
      //获取滚动元素节点的高度,因为数据是后端动态获取的 
      let a = document.getElementsByClassName("ant-table-body")[0].children[0].offsetHeight
      if (a > 0 && this.scrollTop === a - 200) {//200是显示可见部分页面的高度
        this.scrollTop = 0;//当页面滚到最后一条时从第一条开始继续滚动
      } else {
        this.scrollTop += 50
      }
      v.scrollTop = this.scrollTop
    },
  },
  beforeDestroy () {
    clearInterval(this.myScroll)//页面销毁清除定时器
    this.scrollTop = 0;
  },
}
</script>

2. 改变数据实现

通过改变页面的数据,例如有100条数据,每次只展示4条,截取4条显示,定时器每一次就+1往后挪动一条.

代码块:

<script>
export default {
  data () {
    return {
      startNum: 0,
    }
  },
  methods: {
    getData () {//获取数据
      getAction('getVillageEventSecond', value).then(res => {
        if (res.data.length > 0) {
          this.dataSource = res.data
          this.myScroll = setInterval(this.scrollUp, 1000);//拿到数据后开启定时器
        }
      })
    },
    //表格滚动
    scrollUp () {
      if (this.startNum > this.dataSource.length - 1) {
        this.startNum = 0
      }
      //改变数据
      if (this.dataSource.length - this.startNum < 4 && this.dataSource.length - this.startNum > 0) {
        let a = this.dataSource
        let i = 4 - (this.dataSource.length - this.startNum)
        let v = this.dataSource.slice(this.startNum, this.startNum + 4)
        this.dataSourceList = v.concat(a.slice(0, i))
      } else {
        this.dataSourceList = this.dataSource.slice(this.startNum, this.startNum + 4)
      }
      this.startNum += 1
    },
  },
  beforeDestroy () {
    clearInterval(this.myScroll)//页面销毁清除定时器
    this.startNum = 0;
  },
}
</script>