vueスクロールバーを使用してより多くのデータをロード


vueスクロールバーを使用してより多くのデータをロード
最近1つのvueプロジェクトをして、データのロードの时にスクロールバーを使ってもっと多くのデータをロードする必要があります
.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)
			}
		})
	}
}

まとめ
以上の方法はこの需要を実現する全体的な考え方で、初心者として、あなたを助けることができることを望んでいます.もし何か問題があったら、伝言を残してもいいです.すぐに返事します.がんばってね~