思路：给滑动区域一个固定的高度，绑定scroll事件，获取容器可视高度、总共滑动的高度、滑动的距离，利用容器可视高度 + 滑动的距离 == 总共滑动的高度，实现
代码实现如下：
<template><div @scroll="pageScroll" class="bg-scroll"><!-- 里面是循环数据 --><div v-for="item in listData" class="box">{{ item }}</div></div></template><script>export default{data(){return{listData:[1,1,1,1],pageNo:1,pageSize:4,total:20,}},methods:{pageScroll(e){// 滑动条滚动时，距离顶部距离var scrollTop=e.target.scrollTop// 可视区高度var windowHeight=e.target.clientHeight// 滑动条总高度var scrollHeight=e.target.scrollHeight// 滑动条到达底部的条件if(scrollTop+windowHeight==scrollHeight){if(this.listData.length < this.total){this.pageNo++// 获取下一页数据this.getNext()}else{this.Toast('已经到底了')}}console.log(scrollTop,windowHeight,scrollHeight);},getNext(){this.loading.service({background: 'rgba(0, 0, 0, 0.7)'})setTimeout(()=>{// this.listData=this.listData.concat([1,1,1,1])for(let i=1;i<=this.pageSize;i++){this.listData.push(this.pageNo*i)}this.loading.service().close()},2000)}},mounted(){this.getNext()},}</script><style scoped>.bg-scroll{width: 100%;height: 100vh;overflow: auto;}.box{width: 100%;height: 200px;background-color: skyblue;}</style>
注意：如果使用scroll事件，必须设置overflow为auto或者scroll，否则监听不到滑动
