摘要:是一個移動端的上拉下拉加載更多的組件。因為在節(jié)點元素創(chuàng)建之前,必須先設(shè)定高度,否則會導致無法滾動創(chuàng)建完畢是指定給第一個子元素滾動,所以的上拉和下拉刷新也是追加到第一個子元素里面,其實把第一個子元素想象成為里面的就可以了。
listloading.js
listloading是一個移動端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎(chǔ)上開發(fā)的組件,基礎(chǔ)庫可以使用jquery.js或者zepto.js操作dom節(jié)點,目前我是使用了zepto.js作為基礎(chǔ)庫操作dom,以jquery插件的形式存在。如果不想以插件方式使用,則只需要把listloading直接移植你需要的庫里面就ok啦。listloading主要針對移動端而生,在使用瀏覽器自帶滾動,用戶體驗很不友好,與Android和ios差別甚遠,所以選擇iscroll.js,它實現(xiàn)方式是使用css3動畫translate 3D 轉(zhuǎn)換來實現(xiàn)滾動效果,transform屬性使用硬件加速,性能方法得到很大提高。支持Node引入,require引入.
效果圖:npm install listloading使用方法如下: 1、html結(jié)構(gòu)
與iscroll創(chuàng)建的結(jié)構(gòu)一樣,但是指定的創(chuàng)建的元素節(jié)點必須指定ID,因為在組件里面發(fā)布訂閱模式需要做一個標識。因為iscroll在節(jié)點元素創(chuàng)建之前,必須先設(shè)定高度,否則會導致無法滾動;iscroll創(chuàng)建完畢是指定給第一個子元素滾動,所以listloading的上拉和下拉刷新也是追加到第一個子元素里面,其實把第一個子元素想象成為html里面的body就可以了。
2、需要引入的js3、調(diào)用
var Listloading = require("listloading"); var m = 3; var n = 0; var hei = $(window).height(); // 創(chuàng)建iscroll之前必須要先設(shè)置父元素的高度,否則無法拖動iscroll $("#listloading, .listloadingClass").height(hei); // 模板 var createHtml = function(){ var __html = ""; for(var i = 0; i < 15; i++){ var now = new Date().getTime(); now = new Date(now + i*1000000); __html += "
listloading" + (n++) + "
移動端上拉下拉刷新組件...
初始化會執(zhí)行一次,主要是創(chuàng)建iscroll,之后每次下拉刷新結(jié)束之后執(zhí)行,當在方法里面執(zhí)行完畢你的程序之后需要執(zhí)行一個回調(diào)函數(shù),告知已經(jīng)全部程序執(zhí)行完畢,listloading就會自動去調(diào)用iscroll的刷新功能,回調(diào)不需要傳參。
options.pullDownAction = function(cb, flag){ // 下拉刷新 // flag 為true 第一次加載 if (flag) { // dosomething... } // 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) cb(); }4.2 上拉加載更多
每次上拉加載更多結(jié)束之后執(zhí)行,同樣的在執(zhí)行完你的程序之后需要執(zhí)行一個回調(diào)函數(shù),回調(diào)里面需要回調(diào)一個布爾值,如果為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
滾動區(qū)域節(jié)點有增刪則需要在操作完畢之后調(diào)用此方法
listloading.refresh();4.5 是否顯示時間 默認值為false
true下拉顯示時間,距離上次刷新的時間
options.disableTime = true4.6 上拉加載更多文字
options.upLoadmoretxt = "上拉加載更多文字"; // 里面可以放html標簽4.7 下拉刷新文字
options.pullDrefreshtxt = "下拉刷新文字"; // 里面可以放html標簽4.8 正在加載中文字
options.loadertxt = "正在加載中文字"; // 里面可以放html標簽4.9 松開刷新文字
options.Realtimetxt = "松開刷新文字"; // 里面可以放html標簽4.10 已經(jīng)全部加載完畢文字
options.loaderendtxt = "已經(jīng)全部加載完畢文字"; // 里面可以放html標簽4.12 iscroll的配置
options.iscrollOptions = {};目錄結(jié)構(gòu)
listloading
├────build | └──listloading.js // 源文件 ├────demos | └──.... // demo字體樣式 ├────dist | |──css | | └──listloading.min.css // 壓縮css | └──js | └──listloading.min.js // 壓縮js源文件 ├────src | |──css | | └──base.css // 基礎(chǔ)base樣式 | |──fontface | | └──... // 字體文件 | |──images | | └──... // demo圖片 | |──jslib | | └── ... // 第三方庫
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/80048.html
摘要:建議你盡可能地把范式化,不存在嵌套。把所有數(shù)據(jù)放到一個對象里,每個數(shù)據(jù)以為主鍵,不同數(shù)據(jù)相互引用時通過來查找。 一直直在寫一個前端項目,來分享一些Scroll封裝的實踐 設(shè)計目標 因為項目中需要大量的類似Scroll List,ListView頁面: showImg(https://segmentfault.com/img/bVzhkN?w=440&h=881); github上看了圈...
摘要:做一個簡單的移動端展示項目,后臺分頁后前端加載,實現(xiàn)上拉加載下一頁,找了下,還是用這個插件好一點安裝不要使用安裝導入在哪個頁面使用則在哪個頁面導入這里的話,我使用全局導入會出現(xiàn)問題若有錯還請大家指出暫時想到的就是局部引入注冊組件注冊組件 做一個簡單的移動端展示項目,后臺分頁后前端加載,實現(xiàn)上拉加載下一頁,找了下,還是用這個mescroll.js插件好一點 1.npm安裝 npm ins...
摘要:從本人這兩個月移動實踐的經(jīng)驗來看,微信的里面和的滑動效果無論是在安卓還是下的體驗都很一般,有明顯的卡頓現(xiàn)象,在安卓下面還會出現(xiàn)滑動過快的時候在頁面停下來之后滾動條才閃到相應(yīng)位置的現(xiàn)象。 前言 在微信里面瀏覽頁面的時候,有一個很管用的方法可以區(qū)分這個頁面是原生的還是H5形式的。隨便打開一個頁面,用力往下扯的時候,如果頁面上方出現(xiàn)了黑底,黑底上有一行諸如網(wǎng)頁由game.weixin.qq....
摘要:,我們做了一款高質(zhì)量的免費的移動端框架。這是一套基于打造的移動端框架,包含近百種組件,幾乎囊括了開發(fā)移動應(yīng)用的所有細節(jié)。實現(xiàn)開發(fā)一套代碼,發(fā)布和微信小程序兩種應(yīng)用。 Hi,我們做了一款高質(zhì)量的、免費的移動端UI框架。 經(jīng)過將兩年多開發(fā)和項目實踐,我們終于把Touch UI開放出來了。這是一套基于vue.js打造的移動端UI框架,包含近百種組件,幾乎囊括了開發(fā)移動應(yīng)用的所有細節(jié)。 Tou...
閱讀 1289·2023-04-25 19:33
閱讀 1171·2021-10-21 09:39
閱讀 3644·2021-09-09 09:32
閱讀 2614·2019-08-30 10:58
閱讀 1599·2019-08-29 16:17
閱讀 873·2019-08-29 15:29
閱讀 2885·2019-08-26 11:55
閱讀 2657·2019-08-26 10:33