listloading
1.0.0
listloading adalah komponen pull-down dan pull-down seluler yang memuat lebih banyak komponen. Ini terutama bergantung pada komponen yang dikembangkan berdasarkan iscroll.js v5.1.2. Perpustakaan dasar dapat menggunakan jquery.js atau zepto.js untuk mengoperasikan node dom. Saat ini, saya menggunakan zepto.js sebagai perpustakaan dasar untuk mengoperasikan dom, yang ada di bentuk plugin jquery. Jika Anda tidak ingin menggunakannya sebagai plug-in, Anda hanya perlu melakukan transplantasi listloading langsung ke perpustakaan yang Anda perlukan. listloading terutama dirancang untuk terminal seluler. Saat menggunakan scrolling bawaan browser, pengalaman pengguna sangat tidak ramah dan jauh berbeda dari Android dan iOS, jadi saya memilih iscroll.js. Implementasinya adalah menggunakan konversi 3D terjemahan animasi css3 untuk mencapainya efek bergulir. , atribut transformasi menggunakan akselerasi perangkat keras, dan metode kinerja meningkat pesat. Mendukung pengenalan Node dan memerlukan pengenalan.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >Strukturnya sama dengan yang dibuat oleh iscroll, tetapi node elemen yang dibuat harus menentukan ID, karena mode terbitkan dan berlangganan pada komponen memerlukan identifikasi. Karena iscroll harus mengatur ketinggian terlebih dahulu sebelum elemen simpul dibuat, jika tidak maka akan mengakibatkan ketidakmampuan untuk menggulir; setelah iscroll dibuat, iscroll akan ditetapkan ke elemen anak pertama untuk digulir, sehingga pull-up dan pull-down menyegarkan. dari listloading juga ditambahkan ke elemen anak pertama, sebenarnya, bayangkan saja elemen anak pertama sebagai badan dalam 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();
// }
// });Inisialisasi akan dijalankan satu kali, terutama untuk membuat iscroll, dan kemudian dijalankan setelah setiap penyegaran pull-down. Ketika program Anda dijalankan dalam metode ini, fungsi panggilan balik perlu dijalankan untuk menginformasikan bahwa semua program telah listloading secara otomatis panggil iscroll.Fungsi penyegaran, panggilan balik tidak perlu meneruskan parameter.
options . pullDownAction = function ( cb , flag ) { // 下拉刷新
// flag 为true 第一次加载
if ( flag ) {
// dosomething...
}
// 执行完执行方法之后必须执行回调
cb ( ) ;
} Setiap pull-up dijalankan setelah pemuatan lebih lanjut selesai. Demikian pula, setelah menjalankan program Anda, fungsi panggilan balik perlu dijalankan. Nilai Boolean perlu dipanggil kembali dalam panggilan balik selesai, dan pull-up telah selesai.
options . pullUpAction = function ( cb ) { // 上拉加载更多
... . .
// 执行完执行方法之后必须执行回调 true为上拉到底
cb ( true ) ;
} listloading . destroy ( ) ; Jika ada penambahan atau penghapusan node pada area gulir, metode ini perlu dipanggil setelah operasi selesai.
listloading . refresh ( ) ; waktu tampilan pull-down sebenarnya, waktu sejak penyegaran terakhir
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
| | └── . . . // 第三方库Terima kasih khusus kepada microlv atas dukungan teknis dan kontribusi kodenya.
Hak Cipta (c) gtdalp. Semua hak dilindungi undang-undang.
Berlisensi di bawah Lisensi MIT.
