listloading
1.0.0
listloading est un composant mobile déroulant et déroulant qui charge plus de composants. Il s'appuie principalement sur des composants développés sur la base de iscroll.js v5.1.2. La bibliothèque de base peut utiliser jquery.js ou zepto.js pour faire fonctionner les nœuds dom. Actuellement, j'utilise zepto.js comme bibliothèque de base pour faire fonctionner dom. sous la forme d'un plug-in jquery. Si vous ne souhaitez pas l'utiliser comme plug-in, il vous suffit de transplanter listloading directement dans la bibliothèque dont vous avez besoin. listloading est principalement conçu pour les terminaux mobiles. Lors de l'utilisation du défilement intégré du navigateur, l'expérience utilisateur est très peu conviviale et très différente de celle d'Android et d'iOS, j'ai donc choisi iscroll.js. Son implémentation consiste à utiliser l'animation CSS3 pour traduire la conversion 3D. l'effet de défilement, l'attribut de transformation utilise l'accélération matérielle et la méthode de performances est grandement améliorée. Prise en charge de l'introduction du nœud et nécessite une introduction.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >La structure est la même que celle créée par iscroll, mais le nœud d'élément créé spécifié doit spécifier un ID, car le mode de publication et d'abonnement dans le composant nécessite une identification. Parce qu'iscroll doit d'abord définir la hauteur avant la création de l'élément de nœud, sinon cela entraînera l'impossibilité de faire défiler après la création d'iscroll, il est affecté au premier élément enfant pour le défilement, donc l'actualisation pull-up et pull-down ; de listloading sont également ajoutés au premier élément enfant, en fait, imaginez simplement le premier élément enfant comme le corps en HTML.
< 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();
// }
// });L'initialisation sera exécutée une fois, principalement pour créer iscroll, puis exécutée après chaque actualisation déroulante. Lorsque votre programme est exécuté dans la méthode, une fonction de rappel doit être exécutée pour informer que tous listloading programmes ont été exécutés automatiquement. appelez la fonction iscroll, le rappel n'a pas besoin de transmettre de paramètres.
options . pullDownAction = function ( cb , flag ) { // 下拉刷新
// flag 为true 第一次加载
if ( flag ) {
// dosomething...
}
// 执行完执行方法之后必须执行回调
cb ( ) ;
} Chaque pull-up est exécuté une fois le chargement terminé. De même, après l'exécution de votre programme, une fonction de rappel doit être exécutée. Une valeur booléenne doit être rappelée dans le rappel. Si elle est vraie, alors tous les chargements ont été effectués. terminé et le pull-up est terminé.
options . pullUpAction = function ( cb ) { // 上拉加载更多
... . .
// 执行完执行方法之后必须执行回调 true为上拉到底
cb ( true ) ;
} listloading . destroy ( ) ; S'il y a des ajouts ou des suppressions de nœuds dans la zone de défilement, cette méthode doit être appelée une fois l'opération terminée.
listloading . refresh ( ) ; vrai temps d'affichage déroulant, le temps depuis le dernier rafraîchissement
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
| | └── . . . // 第三方库Un merci spécial à microlv pour son support technique et sa contribution au code.
Copyright (c) gtdalp. Tous droits réservés.
Sous licence MIT.
