js实现『加载更多』功能实例 & 点击列表跳转到详情页（tap）

写在前面：
实际操作过程中，因为要用ajax去请求很多次数据，所以性能方面肯定会打折扣，拼接数据也是很麻烦，对于列表数据比较多的情况，写起来不方便，也不好修改维护，不过功能实现很完整，我正在考虑去看看Vue里面不用修改v-for尝试着让它在数组上面做文章。

h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。
解析：https://www.cnblogs.com/52fhy/p/5405541.html

示例：http://me.52fhy.com/demo/loadmore/index.html

基于按钮实现
最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。
案例：
原先Vue用fetch拉取数据
HTML

<div id="item-news-sports" class="mui-control-content">
	<ul class="mui-table-view" id="newsSports" v-for="sport in sports">
		<li class="mui-table-view-cell mui-media">
			<div v-on:click="newsDetail(sport)">
				<img class="mui-media-object mui-pull-left" :src="sport.newsUrlImg ? sport.newsUrlImg : 'images/news.jpg'">
				<div class="mui-media-body">
					<span v-text="sport.newsTitle"></span>
					<p class="mui-ellipsis" v-text="sport.newsSummary"></p>
				</div>
			</div>
		</li>
	</ul>
</div>

JavaScript

fetch(adminUrl + 'common/newsServer/1').then(function (response) {
	return response.json();
}).then(function (json) {
	app.sports = json.data;
});

改：
加载的实现过程类似于：
ajax类方法获取数据
数据存入本地数组
数组中的每条数据对应插入一个HTML模板片段中
将HTML片段append到节点中

<div id="item-news-head" class="mui-control-content mui-active">
	<div class="js-blog-list">

	</div>
	<!-- <ul class="mui-table-view " id="newsHead" v-for="head in heads">
		<li class="mui-table-view-cell mui-media">
			<div v-on:click="newsDetail(head)">
				<img class="mui-media-object mui-pull-left" :src="head.newsUrlImg ? head.newsUrlImg : 'images/news.jpg'">
				<div class="mui-media-body">
					<span v-text="head.newsTitle"></span>
					<p class="mui-ellipsis" v-text="head.newsSummary"></p>
				</div>
			</div>
		</li>
	</ul> -->
	<!--加载更多按钮-->
	<div class="js-load-more">加载更多</div>
</div>

$(function () {
	/*初始化*/
	var counter = 0; /*计数器*/
	var pageStart = 0; /*offset*/
	var pageSize = 6; /*size*/
	/*首次加载*/
	getData(pageStart, pageSize);
	/*监听加载更多*/
	$(document).on('click', '.js-load-more', function () {
		counter++;
		pageStart = counter * pageSize;
		getData(pageStart, pageSize);
	});
});

function getData(offset, size) {
	$.ajax({
		type: 'POST',
		url: adminUrl + 'common/newsServer/0',
		dataType: 'json',
		success: function (reponse) {

			var data = reponse.data;
			var sum = reponse.data.length;
			var result = '';

			/****业务逻辑块：实现拼接html内容并append到页面*********/

			console.log(offset, size, sum);//0 4 14

			/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
			* 例如分页数是5，只剩2条，则只取2条
			*
			* 实际MySQL查询时不写这个不会有问题
			*/
			if (sum - offset < size) {
				size = sum - offset;
			}
			/*使用for循环模拟SQL里的limit(offset,size)*/
			for (var i = offset; i < (offset + size); i++) {
				//console.log(data[i].newsUrlImg + data[i].newsTitle + data[i].newsSummary)
				result +=
							'<ul class="mui-table-view "  id="newsHead" >'+
								'<li class="mui-table-view-cell mui-media">'+
									'<div v-on:click="newsDetail(head)">'+
										//<img class="mui-media-object mui-pull-left" :src="head.newsUrlImg ? head.newsUrlImg : 'images/news.jpg'">
										'<img class="mui-media-object mui-pull-left" src="images/news.jpg">'+
										'<div class="mui-media-body">'+
											'<span >'+data[i].newsTitle+'</span>'+
											'<p class="mui-ellipsis">'+data[i].newsSummary+'</p>'+
										'</div>'+
									'</div>'+
								'</li>'+
							'</ul>'
						
				/* result += '<div class="weui_media_box weui_media_text">' +
					'<a href="' + data[i].newsUrlImg + '" target="_blank"><h4 class="weui_media_title">' + data[i].newsTitle + '</h4></a>' +
					'<p class="weui_media_desc">' + data[i].newsSummary + '</p>' +
					'</div>'; */
			}

			$('.js-blog-list').append(result);

			/*******************************************/

			/*隐藏more按钮*/
			if ((offset + size) >= sum) {
				$(".js-load-more").hide();
			} else {
				$(".js-load-more").show();
			}
		},
		error: function (xhr, type) {
			alert('Ajax error!');
		}
	});
}

---

基于滚动实现：

$(function(){
    /*初始化*/
    var counter = 0; /*计数器*/
    var pageStart = 0; /*offset*/
    var pageSize = 7; /*size*/
    var isEnd = false;/*结束标志*/
    
    /*首次加载*/
    getData(pageStart, pageSize);
    
    /*监听加载更多*/  
    $(window).scroll(function(){
        if(isEnd == true){
            return;
        }

        // 当滚动到最底部以上100像素时， 加载新内容
        // 核心代码
        if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
            counter ++;
            pageStart = counter * pageSize;
            
            getData(pageStart, pageSize);
        }
});
});

可以看出，代码变化不大，主要看核心代码里的判断条件：当滚动到最底部以上100像素时， 加载新内容。

业务逻辑getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的逻辑改成：

if ( (offset + size) >= sum){
    isEnd = true;//没有更多了
}

综合实例

这里面还有要优化的地方，例如：
如何防止滚动过快，服务端没来得及响应造成多次请求？

通过上面的例子，显然第二种更好，不用去点击。但是第二个方法有个问题：
如果设置页面大小每次显示2条或3条(size=2)，总记录是20，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。

因此，我们可以把以上两种方法合在一起：
默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。

新建 loadmore.js

/*
 * loadmore.js
 * 加载更多
 *
 * 可以传的参数默认有：size,scroll 可以自定义
 * */

;(function(w,$){
    
    var loadmore = { 
        /*单页加载更多 通用方法
         * 
         * @param callback 回调方法
         * @param config 自定义参数
         * */
        get : function(callback, config){
            var config = config ? config : {}; /*防止未传参数报错*/

            var counter = 0; /*计数器*/
            var pageStart = 0;
            var pageSize = config.size ? config.size : 10;

            /*默认通过点击加载更多*/
            $(document).on('click', '.js-load-more', function(){
                counter ++;
                pageStart = counter * pageSize;
                
                callback && callback(config, pageStart, pageSize);
            });
            
            /*通过自动监听滚动事件加载更多,可选支持*/
            config.isEnd = false; /*结束标志*/
            config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/
            $(window).scroll(function(){
                
                /*是否开启滚动加载*/
                if(!config.scroll){
                    return;
                }
                
                /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
                if(config.isEnd == true || config.isAjax == true){
                    return;
                }
                
                /*当滚动到最底部以上100像素时， 加载新内容*/
                if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
                    counter ++;
                    pageStart = counter * pageSize;
                    
                    callback && callback(config, pageStart, pageSize);
                }
            });

            /*第一次自动加载*/
            callback && callback(config, pageStart, pageSize);
        },
            
    }

    $.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);

使用

<script src="jquery/loadmore.js"></script>

<div id="item-news-head" class="mui-control-content mui-active">
	<div class="js-blog-list"></div>
	<!--加载更多按钮-->
	<div class="js-load-more">加载更多</div>
</div>

$.loadmore.get(getData, {
	scroll: true,  //默认是false,是否支持滚动加载
	size: 7,  //默认是10
	flag: 1, //自定义参数，可选，示例里没有用到
});
function getData(config,offset, size) {
	config.isAjax = true;
	$.ajax({
		type: 'GET',
		url: adminUrl + 'common/newsServer/0',
		dataType: 'json',
		success: function (reponse) {
			config.isAjax = false;
			var data = reponse.data;
			var sum = reponse.data.length;
			var result = '';

			/****业务逻辑块：实现拼接html内容并append到页面*********/
			//console.log(offset, size, sum);//0 4 14

			if (sum - offset < size) {
				size = sum - offset;
			}
			/*使用for循环模拟SQL里的limit(offset,size)*/
			for (var i = offset; i < (offset + size); i++) {
				//var imgurl = data[i].newsUrlImg ? data[i].newsUrlImg : 'images/news.jpg'
				if (data[i].newsUrlImg) {
					imgurl = data[i].newsUrlImg;
					console.log(imgurl)
				} else {
					imgurl = 'images/news.jpg'
					console.log(imgurl)
				}
				result += '<ul class="mui-table-view "  id="newsHead" >' +
							'<li class="mui-table-view-cell mui-media">' +
								'<div >' +											
									'<img class="mui-media-object mui-pull-left" src="'+imgurl+'" >' +
									'<div class="mui-media-body">' +
										'<span >' + data[i].newsTitle + '</span>' +
										'<p class="mui-ellipsis">' + data[i].newsSummary + '</p>' +
									'</div>' +
								'</div>' +
							'</li>' +
						  '</ul>'
			}

			$('.js-blog-list').append(result);

			/*隐藏more按钮*/
			if ((offset + size) >= sum) {
				isEnd = true;//没有更多了
				$(".js-load-more").hide();
			} else {
				$(".js-load-more").show();
			}
		},
		error: function (xhr, type) {
			alert('Ajax error!');
		}
	});
}

点击列表跳转到详情页
这里我采用mui的tap事件
https://www.cnblogs.com/beast-king/p/9115568.html

document.getElementById("item-news-head").addEventListener('tap', function () {
			//A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示；
			mui.openWindow({
				url: 'news_detail.html',
				id: 'news_detail',
				show: {
					autoShow: false
				}
			});
		})