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

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)
}