listloading
1.0.0
listloading ist eine mobile Pulldown- und Pulldown-Komponente, die mehr Komponenten lädt. Es basiert hauptsächlich auf Komponenten, die auf Basis von iscroll.js v5.1.2 entwickelt wurden. Die Basisbibliothek kann jquery.js oder zepto.js zum Betreiben von Dom-Knoten verwenden. Derzeit verwende ich zepto.js als Basisbibliothek zum Betreiben von dom die Form eines JQuery-Plug-Ins. Wenn Sie es nicht als Plug-In verwenden möchten, müssen Sie listloading nur direkt in die benötigte Bibliothek übertragen. listloading ist hauptsächlich für mobile Endgeräte konzipiert. Die Benutzererfahrung ist sehr unfreundlich und unterscheidet sich stark von der von Android und iOS. Daher wähle ich iscroll.js. Die Implementierung besteht darin, eine 3D-Konvertierung mit CSS3 zu erreichen Der Scroll-Effekt, das Transformationsattribut nutzt die Hardwarebeschleunigung und die Leistungsmethode wird erheblich verbessert. Unterstützen Sie die Einführung des Knotens und erfordern Sie eine Einführung.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >Die Struktur ist dieselbe wie die von iscroll erstellte, der angegebene erstellte Elementknoten muss jedoch eine ID angeben, da der Veröffentlichungs- und Abonnementmodus in der Komponente eine Identifizierung erfordert. Da iscroll zuerst die Höhe festlegen muss, bevor das Knotenelement erstellt wird, andernfalls kann nach der Erstellung von iscroll nicht gescrollt werden. Daher wird es dem ersten untergeordneten Element zum Scrollen zugewiesen, sodass Pull-Up und Pull-Down aktualisiert werden von listloading werden auch an das erste untergeordnete Element angehängt. Stellen Sie sich das erste untergeordnete Element einfach als den Textkörper in HTML vor.
< script src = "../src/jslib/zepto.min.js" > </ script >
< script src = "../src/jslib/iscroll.js" > < / script >
< script src = "../build/ listloading .min.js" > </ script > var listloading = require ( ' listloading ' ) ;
var m = 3 ;
var n = 0 ;
var hei = $ ( window ) . height ( ) ;
// 创建iscroll之前必须要先设置父元素的高度，否则无法拖动iscroll
$ ( '# listloading , . listloading Class' ) . 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 += '<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 ;
}
// demo
var listloading = new listloading ( '# listloading ' , {
disableTime : true , // 是否需要显示时间
pullUpAction : function ( cb ) { // 上拉加载更多
m -- ;
var flg = false ;
var __html = createHtml ( ) ;
if ( m < 1 ) {
flg = true ;
} else {
$ ( '#order-list' ) . append ( __html ) ;
}
// 数据加载完毕需要返回 end为true则为全部数据加载完毕
cb ( flg ) ;
} ,
pullDownAction : function ( cb ) { // 下拉刷新
// true则为默认加载 false为下拉刷新
if ( flg ) {
console . log ( '默认加载' ) ;
}
m = 3 ;
var __html = createHtml ( ) ;
$ ( '#order-list' ) . html ( __html ) ;
// 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作
cb ( ) ;
} ,
// iscroll的API
iscrollOptions : {
//
}
} ) ;
// 点击事件
listloading . evt ( 'li' , 'click' , function ( dom ) {
dom . remove ( ) ;
// $('#order-list').append(createHtml());
listloading . refresh ( ) ;
} ) ;
// demo
// var k = 3;
// var listloading Class = new listloading ('. listloading Class', {
// pullUpAction : function(cb){ //上拉加载更多
// k--;
// var flg = false;
// var __html = createHtml();
// if(k < 1){
// flg = true;
// }else{
// $('# listloading Class-order-list').append(__html);
// }
// // 数据加载完毕需要返回 end为true则为全部数据加载完毕
// cb(flg);
// },
// pullDownAction : function(cb, flag){ //下拉刷新
// // flag 为true 第一次加载
// if (flag) {
// // dosomething...
// }
// k = 3;
// var __html = createHtml();
// $('# listloading Class-order-list').html(__html);
// // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作
// cb();
// }
// });Die Initialisierung wird einmal ausgeführt, hauptsächlich um iscroll zu erstellen, und dann nach jeder Pulldown-Aktualisierung ausgeführt. Wenn Ihr Programm in der Methode ausgeführt wird, muss eine Rückruffunktion ausgeführt werden, um zu informieren, dass alle Programme automatisch listloading werden Rufen Sie die Funktion „iscroll“ auf. Beim Rückruf müssen keine Parameter übergeben werden.
options . pullDownAction = function ( cb , flag ) { // 下拉刷新
// flag 为true 第一次加载
if ( flag ) {
// dosomething...
}
// 执行完执行方法之后必须执行回调
cb ( ) ;
} Jeder Pull-up wird ausgeführt, nachdem weitere Ladevorgänge abgeschlossen sind. Ebenso muss nach der Ausführung Ihres Programms eine Rückruffunktion ausgeführt werden. Wenn dieser Wert wahr ist, wurden alle Ladevorgänge ausgeführt abgeschlossen und der Pull-up ist abgeschlossen.
options . pullUpAction = function ( cb ) { // 上拉加载更多
... . .
// 执行完执行方法之后必须执行回调 true为上拉到底
cb ( true ) ;
} listloading . destroy ( ) ; Wenn im Bildlaufbereich Knoten hinzugefügt oder gelöscht werden, muss diese Methode nach Abschluss des Vorgangs aufgerufen werden.
listloading . refresh ( ) ; wahre Pulldown-Anzeigezeit, die Zeit seit der letzten Aktualisierung
options . disableTime = true options . upLoadmoretxt = '上拉加载更多文字' ; // 里面可以放html标签 options . pullDrefreshtxt = '下拉刷新文字' ; // 里面可以放html标签 options . loadertxt = '正在加载中文字' ; // 里面可以放html标签 options . Realtimetxt = '松开刷新文字' ; // 里面可以放html标签 options . loaderendtxt = '已经全部加载完毕文字' ; // 里面可以放html标签 options . iscrollOptions = { } ;listloading
├────build
| └── listloading . js // 源文件
├────demos
| └── . ... // demo字体样式
├────dist
| | ──css
| | └── listloading . min . css // 压缩css
| └──js
| └── listloading . min . js // 压缩js源文件
├────src
| | ──css
| | └──base . css // 基础base样式
| | ──fontface
| | └── . . . // 字体文件
| | ──images
| | └── . . . // demo图片
| | ──jslib
| | └── . . . // 第三方库Besonderer Dank geht an microlv für seinen technischen Support und seinen Code-Beitrag.
Copyright (c) gtdalp. Alle Rechte vorbehalten.
Lizenziert unter der MIT-Lizenz.
