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);
					}
				});
			}