<template>
<div>
<slot></slot>
<div>
<template v-if="page > totalpage">沒有更多數據～</template> // 沒有更多數據
<template v-else>正在加載！
</template>
</div>
</div>
</template>
<script>
export default {
props: {
props: {
page:{ // 傳值 ，當前頁面，總頁數，上拉調用的方法
type: Number,
default: 1
}, //頁面
totalpage: {
type: Number,
type: Number,
default:1
}, //總頁數
}, //總頁數
update:null, //上拉要調用的函數
}
created(){
window.addEventListener('scroll', this.disposeScroll); //監聽滾動條
},
beforeDestroy(){ //離開
window.removeEventListener('scroll', this.disposeScroll); // 離開是后清除監聽
},
methods: {
}
disposeScroll(){
if(this.page > this.totalpage){ return} // 如果當前大於總頁數，也就是最后一頁，那么就不不觸發了
let top = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0; // 獲取滾動條垂直的位置
if(top + window.innerHeight >= document.body.clientHeight){ //如果滾動條的位置加上窗口的高度大於可見的窗口可見的高度，那么也就是滾動條到低了
this.$emit('update') // 執行update方法
}
}
}
}
</script>
父頁面
<template>
<slide-load :page="page" :totalpage="totalPage" @update="updeList">
<div>
<ul>
<li></li>
</ul>
</div>
</slide-load>
</template>
<script>
import slideLoad from 'sliderLoad.vue' // 引用
components:{ //注冊組件
slideLoad
},
methods: {
getData() { //初始化數據
this.totalPage = res.dataWrapper.total
if (this.page === 1) {
this.blocksList = res.dataWrapper.blocks //數據列表
} else {
this.blocksList = [...this.blocksList, ...res.dataWrapper.blocks] // 追加數據
}
獲取數據
},
updeList() { // 上拉執行
}
this.page++
this.init() // 獲取數據
}
}
</script>
怎么獲取數據，大家應該都是會的，大家自己看一下重要的步驟已經標記出來了，寫的不全，沒發復制運行，