JQ移动端上拉加载下拉刷新2

html

<header class="mui-bar mui-bar-nav">
			<span class="mui-title">上拉加载下拉刷新</span>
		</header>

		<div class="demoList mui-content .mui-scroll-action">
			<div class="xiala" style="display: none;">正在刷新</div>
		</div>

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

script

var TPL = "<div class=\"lists 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 = 3;

			loadDatas(len, TPL, dom);

			$('.demoList').on('touchmove', function(e) {
				var touch = e.originalEvent.targetTouches[0];
				var y = touch.pageY;
				if(y < 120) {
					$(".xiala").css({
						"display": "block"
					})
					$(".lists").remove();
					setTimeout(function() {
						loadDatas(len, TPL, dom);
						$(".xiala").css({
							"display": "none"
						})
					}, 500)
				}

			});

			// 上拉加载
			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);
					}
				});
			}

css

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