美文网首页
vue 滚动到底部分页

vue 滚动到底部分页

作者: 欧小肥OuO | 来源:发表于2023-06-05 09:26 被阅读0次
  mounted () {
    // 监听滚动
    this.dom = document.querySelector('.mb-list-scorll')
    this.dom.addEventListener('scroll', this.scrollFn)
  },
  beforeDestroy () {
    // 移除监听
    this.dom.removeEventListener('scroll', this.scrollFn)
  },
    // 滚动分页
    scrollFn () {
      const scrollDistance =
        this.dom.scrollHeight - this.dom.scrollTop - this.dom.clientHeight
      const scrollTop = this.dom.scrollHeight
      if (scrollDistance <= 0) {
        console.log('到底啦!!!')
        // 加载内容
        setTimeout(() => {
          if (this.dataList.length < this.count) {
            this.page++
            this.getList()
            this.dom.scrollTop = scrollTop
          } else {
          }
        }, 300)
      }
    },

相关文章