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

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

        使用VUE框架来实现。关于vue，可以参考 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字符串，然后加载到页面中显示处理。这样我们在滑动滚动条，或者手机端滑动时，都可以实现滚动分页加载数据。