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

女爷i 2022-12-19 01:17 204阅读 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 条评论，204人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 react-infinite-scroller组件滚动分页加载

安装：需要安装：cnpm i react-infinite-scroller react-custom-scrollbars -S 关键代码： //滚动加载

Love The Way You Lie/ 2022年09月12日 09:52/ 0 赞/ 195 阅读

相关滚动条加载分页数据

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

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

相关 listView实现分页加载

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

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

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

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

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

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

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

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

相关页面上拉加载数据(也就是上拉实现分页)

之所以发这个博客是因为网上百度了太多没法直接套用所以写这个可以直接套用先上代码截图 <script type="text/javascript"

谁借莪１个温暖的怀抱￠/ 2022年05月10日 14:10/ 0 赞/ 171 阅读

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

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

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