listloading
1.0.0
listloading es un componente móvil desplegable y desplegable que carga más componentes. Se basa principalmente en componentes desarrollados en base a iscroll.js v5.1.2. La biblioteca básica puede usar jquery.js o zepto.js para operar nodos dom. Actualmente, uso zepto.js como biblioteca básica para operar dom. la forma de un complemento jquery. Si no desea utilizarlo como complemento, solo necesita trasplantar listloading directamente a la biblioteca que necesita. listloading está diseñada principalmente para terminales móviles. Cuando se utiliza el desplazamiento integrado del navegador, la experiencia del usuario es muy hostil y muy diferente de la de Android e iOS, por lo que elijo iscroll.js. Su implementación es utilizar la conversión de animación css3 para lograr la conversión 3D. el efecto de desplazamiento, el atributo de transformación utiliza aceleración de hardware y el método de rendimiento ha mejorado enormemente. Admite introducción de nodo y requiere introducción.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >La estructura es la misma que la creada por iscroll, pero el nodo del elemento creado especificado debe especificar una ID, porque el modo de publicación y suscripción en el componente requiere una identificación. Debido a que iscroll primero debe establecer la altura antes de crear el elemento de nodo; de lo contrario, no se podrá desplazar después de crear iscroll, y se asigna al primer elemento secundario para el desplazamiento, por lo que se actualizan los menús desplegable y desplegable; de listloading también se agregan al primer elemento secundario; de hecho, imagine el primer elemento secundario como el cuerpo 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();
// }
// });La inicialización se ejecutará una vez, principalmente para crear iscroll, y luego se ejecutará después de cada actualización desplegable. Cuando su programa se ejecuta en el método, se debe ejecutar una función de devolución de llamada para informar que todos los programas listloading han ejecutado automáticamente. llame a la función iscroll.Refresh, la devolución de llamada no necesita pasar parámetros.
options . pullDownAction = function ( cb , flag ) { // 下拉刷新
// flag 为true 第一次加载
if ( flag ) {
// dosomething...
}
// 执行完执行方法之后必须执行回调
cb ( ) ;
} Cada pull-up se ejecuta después de que se completan más cargas. De manera similar, después de ejecutar su programa, se debe ejecutar una función de devolución de llamada. Se debe volver a llamar un valor booleano en la devolución de llamada. Si es verdadero, entonces se han realizado todas las cargas. completado y se ha completado el pull-up.
options . pullUpAction = function ( cb ) { // 上拉加载更多
... . .
// 执行完执行方法之后必须执行回调 true为上拉到底
cb ( true ) ;
} listloading . destroy ( ) ; Si se agregan o eliminan nodos en el área de desplazamiento, se debe llamar a este método una vez completada la operación.
listloading . refresh ( ) ; tiempo de visualización desplegable real, el tiempo desde la última actualización
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 agradecimiento especial a microlv por su soporte técnico y contribución de código.
Copyright (c) gtdalp. Todos los derechos reservados.
Licenciado bajo la Licencia MIT.
