JQ移動端上拉載入
阿新 • • 發佈:2018-12-30
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); } }); }