listloading
1.0.0
listloading — это мобильный раскрывающийся и раскрывающийся компонент, который загружает больше компонентов. В основном он опирается на компоненты, разработанные на основе iscroll.js v5.1.2. Базовая библиотека может использовать jquery.js или zepto.js для работы с узлами dom. В настоящее время я использую zepto.js в качестве базовой библиотеки для работы с dom, которая существует в. форма плагина jquery. Если вы не хотите использовать его как плагин, вам нужно всего лишь пересадить listloading непосредственно в нужную вам библиотеку. listloading в основном предназначена для мобильных терминалов. При использовании встроенной в браузере прокрутки взаимодействие с пользователем очень недружелюбное и сильно отличается от Android и iOS, поэтому для достижения 3D-преобразования выбран Iscroll.js. эффект прокрутки, атрибут преобразования использует аппаратное ускорение, а метод производительности значительно улучшен. Знакомство с узлом поддержки и требование представления.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >Это то же самое, что и структура, созданная iscroll, но указанный созданный узел элемента должен указывать идентификатор, поскольку режим публикации и подписки в компоненте требует идентификации. Поскольку iscroll должен сначала установить высоту до создания элемента узла, в противном случае это приведет к невозможности прокрутки; после создания iscroll она назначается первому дочернему элементу для прокрутки, поэтому вытягивание вверх и вниз обновляется. listloading также добавляются к первому дочернему элементу, просто представьте себе первый дочерний элемент как тело в 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();
// }
// });Инициализация будет выполняться один раз, в основном для создания iscroll, а затем выполняться после каждого раскрывающегося обновления. Когда ваша программа выполняется в методе, необходимо выполнить функцию обратного вызова, чтобы сообщить, что все программы были listloading автоматически. вызовите функцию обновления, обратный вызов не требует передачи параметров.
options . pullDownAction = function ( cb , flag ) { // 下拉刷新
// flag 为true 第一次加载
if ( flag ) {
// dosomething...
}
// 执行完执行方法之后必须执行回调
cb ( ) ;
} Каждое подтягивание выполняется после завершения дополнительной загрузки. Аналогично, после выполнения вашей программы необходимо выполнить функцию обратного вызова. В обратном вызове необходимо вызвать логическое значение. Если оно истинно, то все загрузки были выполнены. завершено, и подтягивание завершено.
options . pullUpAction = function ( cb ) { // 上拉加载更多
... . .
// 执行完执行方法之后必须执行回调 true为上拉到底
cb ( true ) ;
} listloading . destroy ( ) ; Если в области прокрутки есть добавление или удаление узлов, этот метод необходимо вызвать после завершения операции.
listloading . refresh ( ) ; истинное время отображения раскрывающегося списка, время с момента последнего обновления
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
| | └── . . . // 第三方库Особая благодарность microlv за техническую поддержку и вклад в код.
Авторское право (c) gtdalp. Все права защищены.
Лицензировано по лицензии MIT.
