<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>
怎么获取数据，大家应该都是会的，大家自己看一下重要的步骤已经标记出来了，写的不全，没发复制运行，