vue中使用滚动条加载下一页数据

今天遇到一个需求 需要在一个大盒子中展示很多小盒子  大盒子要求固定高度 然后超出高度设置滚动条  然后监听滚动条 当距离底部还剩多少距离就请求下一页的数据 当请求到最后一条时就弹出提示

template中:

<div @scroll.passive="getScroll($event)">
    <div>
        盒子的内容
    </div>
</div>

methods中:

这边我用到了节流操作  不然会每次一滑动就会发送请求 你需要在data中定义scrollTime为null

pNum就是你当前的页码 pSize就是你当前的条数 当你scrollBottom小于多少px的时候才会发起请求  然后判断一下 页码*条数是否大于或者等于总条数 如果要是超过就话就弹出提示 否则发起请求

methods:{
getScroll(event) {
 clearTimeout(this.scrollTimer)
      this.scrollTimer = setTimeout(() => {
         // 滚动条距离底部的距离scrollBottom
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;
		let pNum = 当前页
		let pSize = 多少条
       if (scrollBottom < 40) {
			if(pNum*pSize>=this.total){
				弹出提示
			}
			    发送请求
      }
      }, 300)
    }
    },
}