场景：vue 网站手机端适配，需要实现拉到底部加载下一页的效果。

方法一：浏览器监听函数

浏览器加载到底部监听
1）data相关参数
 

      // 展示的数据tableData: [],// 总数据量 默认为 0pageTotal: 0,// 当前页 默认是第一页currentPage: 1,// 每页大小 默认每页10条数据pageSize: 10,

2）核心方法

watchScroll() {const self = thisconst scrollTop =document.documentElement.scrollTop || document.body.scrollTopconst clientHeight = document.documentElement.clientHeightconst scrollHeight = document.documentElement.scrollHeightif (scrollTop + clientHeight >= scrollHeight) {self.currentPage += 1 //到了底部，当前页面值+1self.fetchData(true) //加载数据函数}},// 初始数据获取fetchData(sign) {// sign 有内容则证明为加载到底部，需要拼接，其他情况则 直接代替，如刷新，查询等不需要加参数，直接fetchData()使用const self = thisconst data = {...//你的接口参数}listget(data).then((response) => {this.pageTotal = response.data.total + this.pageTotalif (response.data.list.length > 0) { //有数据，则把数据加到现有页面上if (sign) {response.data.list.forEach((item) => {this.tableData.push(item)})} else {this.tableData = response.data.list}} else {self.currentPage -= 1 //当前页回退一下self.$message.warning('到底了') //没有消息，出来调试，这种也可以用页面底部展示内容表示}})},

3) 页面监听

created() {window.addEventListener('scroll', this.watchScroll)
},

方法二 使用elementui 自带的无限滚动（这个我没试，但是理论上可以实现）

<template><ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"><li v-for="i in count" class="infinite-list-item">{{ i }}</li></ul>
</template><script>export default {data () {return {count: 0}},methods: {load () {this.count += 2}}}
</script>