vue无限滚动实现

vue无限滚动实现

1.首先挂载一个监听滚动条滚动的方法

  mounted () {
    // 添加滚动条滚动的监听事件
    window.addEventListener('scroll', this.scroll, false)
  },
  beforeDestroy () {
    // 删除滚动条滚动的监听事件
    window.removeEventListener('scroll', this.scroll, false)
  }

2.我们在方法区里编写一个监听滚动条滚动的方法

在滚动方法中我们计算滚动条到底部的距离，当距离小于100px时就调用getHotProduct 获取数据

methods: {
   // 获取热销商品
   getHotProduct () {
     // 当前是否正在加载，如果是正在加载就取消加载数据
     if (this.loading) {
       this.page--
       return
     }
     if (this.productList.length >= this.totalCount) return
     // 赋值表示正在加载
     this.loading = true
     getHots({
       limit: this.limit,
       page: this.page
     }).then(({ data }) => {
       if (data.code === 0) {
         this.totalCount = data.page.totalCount
         this.totalPage = data.page.totalPage
         this.productList = this.productList.concat(data.page.list)
       }
       // 表示加载完成
       this.loading = false
     }).catch((res) => {
       console.log(res)
     })
   },
   scroll () {
     window.onscroll = () => {
       // 整个页面的高度
       const scrollHeight = document.body.scrollHeight
       // 当前可视区的顶部到页面顶部的高度，||是做兼容处理的
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
       // 当前可视区的高度
       const clientHeight = document.documentElement.clientHeight
       // 可视区底部到页面底部的高度，即滚动条与底部的距离
       const instance = scrollHeight - scrollTop - clientHeight
       // 当滚动条与底部的距离小于100时就触发加载数据
       if (instance < 100) {
         this.page++
         this.getHotProduct()
       }
     }
   }
 }

在这里附上一张图，让你更容易理解页面是如何触发方法获取数据的：