vue移动端 上拉加载组件实现

<template>

<div>

<slot></slot>

<div>

<template v-if="page > totalpage">没有更多数据～</template> // 没有更多数据

<template v-else>正在加载！

</template>

</div>

</div>

</template>

<script>

　　export default {
　　　　props: {　　

page:{ // 传值 ，当前页面，总页数，上拉调用的方法

type: Number,

default: 1

}, //页面

totalpage: {
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>

 

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