listloading是一個(gè)移動端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎(chǔ)上開發(fā)的組件，基礎(chǔ)庫可以使用jquery.js或者zepto.js操作dom節(jié)點(diǎn)，目前我是使用了zepto.js作為基礎(chǔ)庫操作dom，以jquery插件的形式存在。如果不想以插件方式使用，則只需要把listloading直接移植你需要的庫里面就ok啦。listloading主要針對移動端而生，在使用瀏覽器自帶滾動，用戶體驗(yàn)很不友好，與Android和ios差別甚遠(yuǎn)，所以選擇iscroll.js，它實(shí)現(xiàn)方式是使用css3動畫translate 2D 轉(zhuǎn)換來實(shí)現(xiàn)滾動效果，transform屬性使用硬件加速，性能方法得到很大提高。
npm安裝
使用方法如下：
1、html結(jié)構(gòu)
與iscroll創(chuàng)建的結(jié)構(gòu)一樣，但是指定的創(chuàng)建的元素節(jié)點(diǎn)必須指定ID，因?yàn)樵诮M件里面發(fā)布訂閱模式需要做一個(gè)標(biāo)識。因?yàn)閕scroll在節(jié)點(diǎn)元素創(chuàng)建之前，必須先設(shè)定高度，否則會導(dǎo)致無法滾動；iscroll創(chuàng)建完畢是指定給第一個(gè)子元素滾動，所以listloading的上拉和下拉刷新也是追加到第一個(gè)子元素里面，其實(shí)把第一個(gè)子元素想象成為html里面的body就可以了。
2、需要引入的js
<script src="../src/jslib/zepto.min.js"></script><script src="../src/jslib/iscroll.js"></script><script src="../build/listloading.js"></script>
3、調(diào)用
var m = 3, n = 0;// 創(chuàng)建iscroll之前必須要先設(shè)置父元素的高度，否則無法拖動iscroll$('#listloading').height($(window).height());// 模板或者ajax請求方法var createHtml = function(){var __html = '';for(var i = 0; i < 15; i++){var now = new Date().getTime();now = new Date(now + i*1000000);__html += '<li><span class="icon"></span><p class="title"><time class="r">' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p class="text">移動端上拉下拉刷新組件...</li>';}return __html;}// 選擇器必須是ID 因?yàn)橐玫桨l(fā)布訂閱做標(biāo)識var listloading = $('#listloading').listloading({disableTime: true, // 是否需要顯示時(shí)間pullUpAction : function(cb){ //上拉加載更多m--;var flg = false;var __html = createHtml();if(m < 1){flg = true;}else{$('#order-list').append(__html);}// 數(shù)據(jù)加載完畢需要返回 end為true則為全部數(shù)據(jù)加載完畢cb(flg);},pullDownAction : function(cb){ //下拉刷新m = 3;n = 0;var __html = createHtml();$('#order-list').html(__html);// 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) 回調(diào)的作用是通知默認(rèn)加載已經(jīng)全部執(zhí)行完畢，程序需要去創(chuàng)建iscrollcb();},// iscroll的API iscrollOptions: {//}});// 點(diǎn)擊事件 因?yàn)閕scroll阻止了冒泡，它也建議自己寫點(diǎn)擊方法，如果開啟preventDefault為false這行就是解決onclick失效問題， 但是開啟這個(gè)值在微信下面拖動會有問題 滑動結(jié)束之后觸發(fā)不到scrollend，所以我自己內(nèi)嵌了一個(gè)事件方法listloading.evt('li', 'click', function (dom) {// dom.remove();// $('#order-list').append(createHtml());// listloading.refresh();});效果圖
/p>
4、API
4.1 下拉刷新
初始化會執(zhí)行一次，主要是創(chuàng)建iscroll，之后每次下拉刷新結(jié)束之后執(zhí)行，當(dāng)在方法里面執(zhí)行完畢你的程序之后需要執(zhí)行一個(gè)回調(diào)函數(shù)，告知已經(jīng)全部程序執(zhí)行完畢，listloading就會自動去調(diào)用iscroll的刷新功能，回調(diào)不需要傳參。
options.pullDownAction = function(cb){ //下拉刷新.....// 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào)cb();}4.2 上拉刷新
每次上拉刷新結(jié)束之后執(zhí)行，同樣的在執(zhí)行完你的程序之后需要執(zhí)行一個(gè)回調(diào)函數(shù)，回調(diào)里面需要回調(diào)一個(gè)布爾值，如果為true則怎么已經(jīng)全部加載完畢，就已經(jīng)拉到底了。
options.pullUpAction = function(cb){ //下拉刷新.....// 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) true為下拉到底cb(true);}4.3 銷毀ListLoading
4.4 刷新listloading
滾動區(qū)域節(jié)點(diǎn)有增刪則需要在操作完畢之后調(diào)用此方法
4.5 是否顯示時(shí)間 默認(rèn)值為false
true下拉顯示時(shí)間，距離上次刷新的時(shí)間
4.6 上拉刷新文字
4.7 下拉刷新文字
4.8 正在加載中文字
4.9 松開刷新文字
4.10 已經(jīng)全部加載完畢文字
4.12 iscroll的配置
以上所述是小編給大家介紹的Listloading.js移動端上拉下拉刷新組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
