vueスクロールバーを使用してより多くのデータをロード
9851 ワード
vueスクロールバーを使用してより多くのデータをロード
最近1つのvueプロジェクトをして、データのロードの时にスクロールバーを使ってもっと多くのデータをロードする必要があります
.VUEページキー
.JSコード
まとめ
以上の方法はこの需要を実現する全体的な考え方で、初心者として、あなたを助けることができることを望んでいます.もし何か問題があったら、伝言を残してもいいです.すぐに返事します.がんばってね~
最近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)
}
})
}
}
まとめ
以上の方法はこの需要を実現する全体的な考え方で、初心者として、あなたを助けることができることを望んでいます.もし何か問題があったら、伝言を残してもいいです.すぐに返事します.がんばってね~