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)

}