JQ移动端上拉加载

Html

<header class="mui-bar mui-bar-nav">
			<span class="mui-title">上拉加载</span>
		</header>
		<div class="demoList mui-content">

		</div>
		<section id="main">
			<ul id="list_box">上拉加载更多</ul>
		</section>

CSS

.content{
				background: url(images/body.png);
				width: 200px;
				height: 200px;
				background-size: 100% 100%;
			}

JS

1.调用

var TPL = "<div class=\"mui-card-header mui-card-media\">\n" +
    "\t\t\t\t<img src=\"images/logo.png\" />\n" +
    "\t\t\t\t<div class=\"mui-media-body\">\n" +
    "\t\t\t\t\t尼尔森\n" +
    "\t\t\t\t\t<p>发表于 2016-06-30 15:30</p> \n" +
    "\t\t\t\t\t<div class=\"content\"></div>\n" +
    "\t\t\t\t</div>\n" +
    "\t\t\t</div>";
			var dom = ".demoList";
			var len = 10;

			loadDatas(len, TPL, dom);

2.封装方法

function loadDatas(len, TPL, dom) {
				var page = 1, //分页码
					off_on = false, //分页开关
					timers = null;

				// 首次加载数据
				$(document).ready(function() {
					loadData(len, TPL, dom);
				})

				// 参数
				// len 每次加载多少条数据
				// TPL 加载的模板
				// dom 加载数据的Dom
				function loadData(len, TPL, dom) {
					var str = '';
					for(var i = 0; i < len; i++) {
						str += TPL;
					}
					$(dom).append(str);
					off_on = true;
				}

				$(window).scroll(function() {
					//当时滚动条离底部60px时开始加载下一页的内容
					if(($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
						clearTimeout(timers);
						timers = setTimeout(function() {
							page++;
							console.log("第" + page + "页");
							loadData(len, TPL, dom);
						}, 300);
					}
				});
			}