vue使用滚动条加载更多数据

vue使用滚动条加载更多数据

最近在做一个vue项目，在数据加载的时候需要使用到滚动条加载更多数据，具体需要实现下拉加载后面的数据，上拉加载之前的数据，实现最多在页面渲染10页数据，限制页数加载更多，继续看看吧，希望能帮到你呀

.VUE页面关键代码

<div id="scrollDiv" ref="scrollPosition">
	
div>

.JS代码

data () {
     
	return {
     
		scrollTimer, // 定时器异步处理加载完数据后滚动条定位操作
		dataList: [], // 接受数据
		isScrollBottom: true, // 是否滚动底部加载
		isScrollTop: true // 是否滚动顶部加载
	}
},
mounted () {
     
	window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
     
	handleScroll () {
     
		let scrollTop = document.querySelector('#scrollDiv').scrollTop
		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
		let scrollHeight = document.querySelector('#scrollDiv').scrollHeight
		// 滚动条到底部
		if (scrollTop + windowHeight === scrollHeight && this.isScroll){
     
			this.isScrollBottom = false
			this.getDataList(0) // 滚到底部加载数据
		}
		// 滚动条到顶部
		if (scrollTop === 0 && this.isScrollTop) {
     
			this.isScrollTop = false
			this.getDataList(1) // 滚动到顶部加载
		}
	},
	// 获取数据
	getDataList (check) {
     
		this.$http.post('接口地址').then(res => {
     
			if (res.success) {
     
				this.scrollTimer = setTimeOut(() => {
     
					// 底部加载数据
					if (check === 0) {
     
						this.$refs.scrollPosition.scrollTop -= 200
						this.isScrollBottom = true
					}
					if (check === 1) {
     
						this.$refs.scrollPosition.scrollTop += 200
						this.isScrollTop = true
					}
					// 清理定时器
					clearTimeout(this.scrollTimer)
				}, 0)
			}
		})
	}
}

总结

以上方法就是实现这个需求的总体思路，作为一个新手，希望能帮到你。如果有什么问题，可以留言，我会及时回复大家。加油呀～