笔记-VUE滚动加载更多数据

来源：https://blog.csdn.net/qq_17281881/article/details/87342403

VUE滚动加载更多数据

 data() {
     return {
          loading: false,
          loadingMore: false,//loading 加载更多
          isScroll: true,//是否可以滚动
          pageIndex: 1,
          pageSize: 10,
          list: [],
      }
  },

 mounted() {
     document.addEventListener('scroll', this.scrollMoreData, false)
 },

 methods: {
     scrollMoreData() {
         const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度
         const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度
         const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽)
         // console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)

         if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) {
             this.isScroll = false
             this.loadingMore = true
             let pageNo = this.pageIndex += 1
             api.Get('/list', {
                 pageIndex: pageNo,
                 pageSize: this.pageSize,
             }).then(res => {
                 this.loadingMore = false
                 if (res.data.list.length > 0) {
                     this.isScroll = true
                     this.list = [...this.list, ...res.data.list]
                 } else {
                     this.show = true
                 }
             })
         }
         },
     },
 },

 destroyed() {
     document.removeEventListener('scroll', this.scrollMoreData, false)