Listloading.js移動(dòng)端上拉下拉刷新組件
listloading是一個(gè)移動(dòng)端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎(chǔ)上開發(fā)的組件,基礎(chǔ)庫可以使用jquery.js或者zepto.js操作dom節(jié)點(diǎn),目前我是使用了zepto.js作為基礎(chǔ)庫操作dom,以jquery插件的形式存在。如果不想以插件方式使用,則只需要把listloading直接移植你需要的庫里面就ok啦。listloading主要針對(duì)移動(dòng)端而生,在使用瀏覽器自帶滾動(dòng),用戶體驗(yàn)很不友好,與Android和ios差別甚遠(yuǎn),所以選擇iscroll.js,它實(shí)現(xiàn)方式是使用css3動(dòng)畫translate 2D 轉(zhuǎn)換來實(shí)現(xiàn)滾動(dòng)效果,transform屬性使用硬件加速,性能方法得到很大提高。
npm安裝
npm install -g listloading
使用方法如下:
1、html結(jié)構(gòu)
與iscroll創(chuàng)建的結(jié)構(gòu)一樣,但是指定的創(chuàng)建的元素節(jié)點(diǎn)必須指定ID,因?yàn)樵诮M件里面發(fā)布訂閱模式需要做一個(gè)標(biāo)識(shí)。因?yàn)閕scroll在節(jié)點(diǎn)元素創(chuàng)建之前,必須先設(shè)定高度,否則會(huì)導(dǎo)致無法滾動(dòng);iscroll創(chuàng)建完畢是指定給第一個(gè)子元素滾動(dòng),所以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è)置父元素的高度,否則無法拖動(dòng)iscroll
$('#listloading').height($(window).height());
// 模板或者ajax請(qǐng)求方法
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">移動(dòng)端上拉下拉刷新組件...</li>';
}
return __html;
}
// 選擇器必須是ID 因?yàn)橐玫桨l(fā)布訂閱做標(biāo)識(shí)
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)建iscroll
cb();
},
// iscroll的API
iscrollOptions: {
//
}
});
// 點(diǎn)擊事件 因?yàn)閕scroll阻止了冒泡,它也建議自己寫點(diǎn)擊方法,如果開啟preventDefault為false這行就是解決onclick失效問題, 但是開啟這個(gè)值在微信下面拖動(dòng)會(huì)有問題 滑動(dòng)結(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 下拉刷新
初始化會(huì)執(zhí)行一次,主要是創(chuàng)建iscroll,之后每次下拉刷新結(jié)束之后執(zhí)行,當(dāng)在方法里面執(zhí)行完畢你的程序之后需要執(zhí)行一個(gè)回調(diào)函數(shù),告知已經(jīng)全部程序執(zhí)行完畢,listloading就會(huì)自動(dòng)去調(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
listloading.destroy();
4.4 刷新listloading
滾動(dòng)區(qū)域節(jié)點(diǎn)有增刪則需要在操作完畢之后調(diào)用此方法
listloading.refresh();
4.5 是否顯示時(shí)間 默認(rèn)值為false
true下拉顯示時(shí)間,距離上次刷新的時(shí)間
options.disableTime = true
4.6 上拉刷新文字
options.upLoadmoretxt = '上拉刷新文字'; // 里面可以放html標(biāo)簽
4.7 下拉刷新文字
options.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放html標(biāo)簽
4.8 正在加載中文字
options.loadertxt = '正在加載中文字'; // 里面可以放html標(biāo)簽
4.9 松開刷新文字
options.Realtimetxt = '松開刷新文字'; // 里面可以放html標(biāo)簽
4.10 已經(jīng)全部加載完畢文字
options.loaderendtxt = '已經(jīng)全部加載完畢文字'; // 里面可以放html標(biāo)簽
4.12 iscroll的配置
options.iscrollOptions = {};
以上所述是小編給大家介紹的Listloading.js移動(dòng)端上拉下拉刷新組件,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個(gè)javascript新手,怎么說呢,先學(xué)的jquery,精通之后發(fā)現(xiàn)了javascript的重要性,再回過頭來學(xué)javascript面向?qū)ο缶幊?/div> 2012-03-03
JavaScript中數(shù)組Array.sort()排序方法詳解
本篇文章主要介紹了JavaScript中數(shù)組Array.sort()的排序方法。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-03-03
js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的二級(jí)聯(lián)動(dòng)效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
使用Cookies保存網(wǎng)站歷史瀏覽記錄實(shí)例代碼
仿淘寶網(wǎng)的最近瀏覽記錄功能,喜歡的朋友可以參考下。2010-07-07
深入理解JavaScript系列(6):S.O.L.I.D五大原則之單一職責(zé)SRP
Bob大叔提出并發(fā)揚(yáng)了S.O.L.I.D五大原則,用來更好地進(jìn)行面向?qū)ο缶幊?/div> 2012-01-01
JavaScript實(shí)現(xiàn)時(shí)鐘功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)鐘功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06最新評(píng)論
最近更新的內(nèi)容
- 微信小程序canvas動(dòng)態(tài)時(shí)鐘
- 半角全角相互轉(zhuǎn)換的js函數(shù)
- 使用JavaScript腳本無法直接改變Asp.net中Checkbox控件
- js實(shí)現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動(dòng)廣告條代碼
- 一文詳解JavaScript中的事件循環(huán)(event?loop)機(jī)制
- ES5 ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法總結(jié)
- 小程序關(guān)于請(qǐng)求同步的總結(jié)
- js實(shí)現(xiàn)輪播圖的兩種方式(構(gòu)造函數(shù)、面向?qū)ο?
- ES6的循環(huán)與可迭代對(duì)象示例詳解
- 開發(fā)中常用的25個(gè)JavaScript單行代碼(小結(jié))

