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="m