vue监听滚动到底部加载更多

最新推荐文章于 2025-09-16 00:00:49 发布

原创最新推荐文章于 2025-09-16 00:00:49 发布 · 8.9k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue滚动加载显示更多详解

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个Vue项目的实现，通过滚动到底部自动加载更多内容的功能。使用了默认每页10条数据的分页策略，详细展示了HTML结构、状态控制变量及滚动事件监听的代码实现。

整理之前做过的一个vue滚动到底部的加载显示更多功能，后台已经分好了页就剩前端渲染主要参数pageSize 每页数量（这里默认10） pageNum 页数，能用代码说的就不吹泡泡了直接上代码：
一、html结构

<div class="more-load" v-if="isMoreLoad" @click="scrollLoadMore">
   <img v-if="loadingImg" src="./assets/image/loading.gif" alt="">
   <span v-else>查看更多</span>
 </div>
 <div class="more-load" v-if="loadLastText">到底啦〜想不到你看到了这里^_^</div>

二、用来控制加载更多状态几个变量

isMoreLoad: false,  // 是否显示加载更多
loadingImg: false,  // 加载更多时显示loading图
loadLastText: false, // 到底了
definePageNum: 1,// 默认加载页数
definePafeSize: 10, // 默认每页数量
totals: null, // 用来存放总数量

三、触发加载更多（初始化渲染数据就不重复了），获取数据逻辑也就是调用scrollLoadMore函数

scrollLoadMore(){
	// 防止多次加载
     if(this.loadingImg){
       return;
     }
     this.loadingImg = true;
     this.$http.get('url',{
           params:{
               'pageNum': _this.definePageNum,
               'pageSize': _this.definePageSize,
           }
       }).then((res) =>{
         if(res.data.code == 'success'){
           this.totals = res.data.data.total;
           if(this.totals - this.definePageNum*definePafeSize > 0){
             this.isMoreLoad = true;
           }else{
             this.isMoreLoad = false;
             this.loadLastText = true;
           }
           this.loadingImg = false;
         }
       })
   },

四、滚动到底部触发scrollLoadMore函数在mounted里添加监听

var _this = this;
window.addEventListener('scroll', function(){
   var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
   var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
   var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端
   if(scr + clientHeight + 10 >= scrHeight){
     if(_this.isMoreLoad){ //this.isMoreLoad控制滚动是否加载更多
    	_this.definePageNum = _this.definePageNum + 1; // 加载更多是definePageNum+1
       _this.scrollLoadMore();
     }else{
       return;
     }
   }
 });

到此新鲜的点击或者滚动到底部的加载更多就出炉了
如果你浪费了自己的年龄，那是挺可悲的。因为你的青春只能持续一点儿时间——很短的一点儿时间