listloading
1.0.0
listloading é um componente suspenso e suspenso móvel que carrega mais componentes. Baseia-se principalmente em componentes desenvolvidos com base em iscroll.js v5.1.2. A biblioteca básica pode usar jquery.js ou zepto.js para operar nós dom. Atualmente, uso zepto.js como a biblioteca básica para operar o dom. na forma de um plug-in jquery. Se não quiser usá-lo como um plug-in, você só precisa transplantar listloading diretamente para a biblioteca necessária. listloading é projetado principalmente para terminais móveis. Ao usar a rolagem integrada do navegador, a experiência do usuário é muito hostil e muito diferente do Android e iOS, então eu escolho iscroll.js. Sua implementação é usar a conversão de animação css3 em 3D para obter. o efeito de rolagem, o atributo transform usa aceleração de hardware e o método de desempenho é bastante melhorado. Introdução do nó de suporte e requer introdução.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >A estrutura é a mesma criada por iscroll, mas o nó do elemento criado especificado deve especificar um ID, porque o modo de publicação e assinatura no componente requer uma identificação. Como o iscroll deve primeiro definir a altura antes da criação do elemento do nó, caso contrário, resultará na incapacidade de rolar após a criação do iscroll, ele é atribuído ao primeiro elemento filho para rolagem, portanto, o pull-up e o pull-down são atualizados; de listloading também são anexados ao primeiro elemento filho; na verdade, imagine o primeiro elemento filho como o corpo em 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();
// }
// });A inicialização será executada uma vez, principalmente para criar o iscroll, e então executada após cada atualização do menu suspenso. Quando seu programa for executado no método, uma função de retorno de chamada precisará ser executada para informar que todos os programas foram listloading automaticamente. chame a função iscroll. O retorno de chamada não precisa passar parâmetros.
options . pullDownAction = function ( cb , flag ) { // 下拉刷新
// flag 为true 第一次加载
if ( flag ) {
// dosomething...
}
// 执行完执行方法之后必须执行回调
cb ( ) ;
} Cada pull-up é executado após a conclusão de mais carregamentos. Da mesma forma, após a execução do seu programa, uma função de retorno de chamada precisa ser executada de volta no retorno de chamada. concluído e o pull-up foi concluído.
options . pullUpAction = function ( cb ) { // 上拉加载更多
... . .
// 执行完执行方法之后必须执行回调 true为上拉到底
cb ( true ) ;
} listloading . destroy ( ) ; Se houver adições ou exclusões de nós na área de rolagem, este método precisará ser chamado após a conclusão da operação.
listloading . refresh ( ) ; tempo de exibição suspenso verdadeiro, o tempo desde a última atualização
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
| | └── . . . // 第三方库Agradecimentos especiais ao microlv por seu suporte técnico e contribuição de código.
Copyright (c) gtdalp. Todos os direitos reservados.
Licenciado sob a licença MIT.
