listloading
1.0.0
listloading 더 많은 구성요소를 로드하는 모바일 풀다운 및 풀다운 구성요소입니다. 주로 iscroll.js v5.1.2를 기반으로 개발된 컴포넌트에 의존하고 있는데, 기본 라이브러리는 jquery.js나 zepto.js를 이용해 dom 노드를 운용할 수 있는데, 현재는 dom을 운용하기 위한 기본 라이브러리로 zepto.js를 사용하고 있습니다. jquery 플러그인의 형태입니다. 플러그인으로 사용하지 않으려면 listloading 필요한 라이브러리에 직접 이식하기만 하면 됩니다. listloading 은 주로 모바일 터미널용으로 설계되었습니다. 브라우저에 내장된 스크롤링을 사용할 때 사용자 경험은 Android 및 iOS와는 매우 다르므로 iscroll.js를 사용하여 구현합니다. 스크롤 효과, 변환 속성은 하드웨어 가속을 사용하며 성능 방법이 크게 향상되었습니다. 노드 도입을 지원하고 도입이 필요합니다.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >구조는 iscroll에 의해 생성된 것과 동일하지만 구성 요소의 게시 및 구독 모드에는 식별이 필요하기 때문에 지정된 생성 요소 노드는 ID를 지정해야 합니다. 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 함수가 실행되어야 합니다. iscroll.Refresh 함수를 호출하면 콜백에 매개변수를 전달할 필요가 없습니다.
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에게 특별히 감사드립니다.
Copyright (c) gtdalp.모든 권리 보유.
MIT 라이선스에 따라 라이선스가 부여됩니다.
