实现页面滚动加载分页数据的方法

女爷i 2022-12-19 01:17 271阅读 0赞

我们在web页面开发或H5开发中常见滚动加载分页的功能，下面写出一个实现范例和技巧。

使用VUE框架来实现。关于vue，可以参考 [https://mp.csdn.net/editor/html/104135161][https_mp.csdn.net_editor_html_104135161]

var vm = {
        data() {
    		return { onFetching:false,page:1 };
    	},	
        mounted() {	  
    	  let sw = true;//滚动控制开关
    	  document.addEventListener('scroll',this.scrollHandle);//启动监听滚动事件
    	},
        methods: {
          var v_page=this.page;
    	  getData(){
             //调用后台api获取数据的方法，一般为一个数组结果集
             $.get("xxx/getxxxList",{page:v_page,},function(data){
               var data=JSON.parse(data); 
               for(var i =0;i<data.length;i++){
                 var htmls='这里拼接数据到显示轮播页面行元素';
                 $("#xxid").append(htmls);
               }
               sw = true;
    		  });
        },
    	  scrollHandle: function(e) {
    	    let scrollHeight= document.documentElement.scrollHeight || document.body.scrollHeight; //document的滚动高度
    		let nowScotop = document.documentElement.clientHeight || document.body.clientHeight;  //可视区高度
    		let wheight= document.documentElement.scrollTop || document.body.scrollTop; //已滚动高度
    
    	    if (this.onFetching) {
               // do nothing
    		} else {
    		  if ( scrollHeight - wheight<1100 ) {
    			this.onFetching = true;
    			setTimeout(() => {
    				this.page+=1;
    				this.getData(); //加载列表的请求方法
    				this.onFetching = false;
    			}, 500);
    		  }
    		}
    	  },
    ...
    
    };
    var vueObj = Vue.extend(vm);  new vueObj().$mount('#vue_app');

我们看到，上述代码实现滚动加载的方法主要思路是，vue的mounted构建时启动页面的scroll事件的监听，并回调方法scrollHandle，我们在scrollHandle方法中写出页面滚动适当高度时调用获取加载数据的方法getData，在getData方法中，参数page是传递的分页数，调用一个ajax后台方法获取数据，并且拼接返回页面行元素的html字符串，然后加载到页面中显示处理。这样我们在滑动滚动条，或者手机端滑动时，都可以实现滚动分页加载数据。

[https_mp.csdn.net_editor_html_104135161]: https://mp.csdn.net/editor/html/104135161

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关 android ListView 数据分页加载

Android应用开发中，采用ListView组件来展示数据是很常用的功能，当一个应用要展现很多的数据时，一般情况下都不会把所有的数据一次就展示出来，而是通过分页的形

深藏阁楼爱情的钟/ 2023年10月16日 19:36/ 0 赞/ 43 阅读

相关 html 鼠标滚动轴滚动分页加载

滚动加载原理其实很简单，就是先判断当前是不是处在最底部，如果在最底部就可以继续加载添加数据。这里只是判断是否处在了底部，其他部分就根据自己的业务不同而代码不同。直接上代码吧。

电玩女神/ 2022年12月19日 08:53/ 0 赞/ 197 阅读

相关实现页面滚动加载分页数据的方法

我们在web页面开发或H5开发中常见滚动加载分页的功能，下面写出一个实现范例和技巧。使用VUE框架来实现。关于vue，可以参考 [https

女爷i/ 2022年12月19日 01:17/ 0 赞/ 272 阅读

相关 vue 移动端加载更多分页组件_vue 分页加载数据页面滚动加载更多

组件源码 .vue文件 style="height:100%;overflow:auto" ref="filesTable" > ref="tableInner" c

小灰灰/ 2022年10月26日 14:09/ 0 赞/ 334 阅读

相关 Android的ViewPager分页加载数据

在viewPager的适配器里,列表数据有很多条的时候，加载需要做分页,举例：一次加载10条，需要后端写好分页接口，我们在安卓这边这样处理: 关键代码:在onCreate(

痛定思痛。/ 2022年10月15日 00:38/ 0 赞/ 37 阅读

相关滚动条加载分页数据

<div id="listBody"> </div> listBody 数据外最大的盒子 data(){ return{ page: {

亦凉/ 2022年09月04日 11:56/ 0 赞/ 345 阅读

相关 listView实现分页加载

实现简单的listview分页加载，效果如下图所示： ![这里写图片描述][20160306020113348] ListView显示预加载的10个Item，往上拉动每

本是古典何须时尚/ 2022年08月21日 00:04/ 0 赞/ 269 阅读

相关 jQuery实现页面滚动时动态加载内容的方法

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下：很多网站，比如twitter，京东商城首页，会在页面滚动到一定的位置时才动态

悠悠/ 2022年07月11日 16:03/ 0 赞/ 437 阅读

相关 angularJS-滚动到底部加载数据实现分页 --- 通过指令实现

<!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 12:18/ 0 赞/ 225 阅读

相关 uni-app上拉页面加载数据，实现分页效果

实现分页效果是为了在上拉数据的时候逐渐加载下一页面的数据，这样就不会造成数据加载太多造成的页面显示过慢的问题，可以在一定成的上优化界面。首先要先定义数据和在上拉函数中调用t

àì夳堔傛蜴生んèń/ 2021年11月23日 02:52/ 0 赞/ 1414 阅读