如何在vue中实现一个定时自动间隔多少秒滚动的滚动条？

  • Z时代
  • 2024-02-11
  • 分类：IT

如何在vue中实现一个定时自动间隔多少秒滚动的滚动条？

mounted () {
    this.getTableScroll()
  },
  destroyed () {
    this.getTableScroll()
  },
  methods: {
    getTableScroll () {
      if (!this.intervalID) {
        this.intervalID = setInterval(this.autoScroll, 2000)
      }
    },
    autoScroll () {
      const dom = this.$refs.scrollTable
      dom.scrollTop = dom.scrollHeight
    }

这么写能一下子滚动，不能间隔滚动，怎么优化实现呢？？

参考楼里大佬答案，但是不实现已打开页面就自动间隔滚动，反而是要手动滚动并一下子回到顶部，这是哪里有问题（350是容器的固定高度）

data () {
    return {
      activeCls: 'red',
      labelCls: 'label',
      valueCls: 'value',
      // 定时器标识符
      intervalID: null,
      scrollStep: 30,
      currentScrollTop: 0
      // table_col: 'table_col'
    }
  },
  mounted () {
    this.getTableScroll()
  },
  destroyed () {
    this.clearScrollInterval()
  },
  methods: {
    getTableScroll () {
      if (!this.intervalID) {
        this.intervalID = setInterval(this.autoScroll, 2000)
      }
    },
    clearScrollInterval () {
      if (this.intervalID) {
        clearInterval(this.intervalID)
        this.intervalID = null
      }
    },
    autoScroll () {
      const dom = this.$refs.scrollTable
      this.currentScrollTop += this.scrollStep
      if (this.currentScrollTop >= dom.scrollHeight - 350) {
        this.currentScrollTop = dom.scrollHeight - 350
      }
      dom.scrollTop = dom.currentScrollTop
    }
  }

回答：

data () {
  return {
    activeCls: 'red',
    labelCls: 'label',
    valueCls: 'value',
    // 定时器标识符
    intervalID: null,
    scrollStep: 30,
    currentScrollTop: 0
    // table_col: 'table_col'
  }
},
mounted () {
  this.getTableScroll()
},
beforeDestroy () {
  this.clearScrollInterval()
},
methods: {
  getTableScroll () {
    if (!this.intervalID) {
      this.intervalID = setInterval(this.autoScroll, 2000)
    }
  },
  clearScrollInterval () {
    if (this.intervalID) {
      clearInterval(this.intervalID)
      this.intervalID = null
    }
  },
  autoScroll () {
    const dom = this.$refs.scrollTable
    this.currentScrollTop += this.scrollStep
    if (this.currentScrollTop >= dom.scrollHeight - 350) {
      this.currentScrollTop = 0 // 重置为0，重新开始滚动
    }
    dom.scrollTop = this.currentScrollTop
  }
}

以上是 如何在vue中实现一个定时自动间隔多少秒滚动的滚动条？ 的全部内容， 来源链接： utcz.com/p/934614.html

回到顶部