listloading
1.0.0
listloading هو مكون منسدل ومنسدل على الأجهزة المحمولة يقوم بتحميل المزيد من المكونات. يعتمد بشكل أساسي على المكونات التي تم تطويرها بناءً على iscroll.js v5.1.2. يمكن للمكتبة الأساسية استخدام jquery.js أو zepto.js لتشغيل عقد dom شكل البرنامج المساعد jquery. إذا كنت لا ترغب في استخدامه كمكون إضافي، فأنت تحتاج فقط إلى نقل listloading مباشرة إلى المكتبة التي تحتاجها. تم تصميم listloading بشكل أساسي للمحطات الطرفية المتنقلة. عند استخدام التمرير المدمج في المتصفح، تكون تجربة المستخدم غير ودية للغاية وتختلف كثيرًا عن Android وiOS، لذلك اخترت iscroll.js لتنفيذه باستخدام الرسوم المتحركة css3 وترجمة التحويل ثلاثي الأبعاد تأثير التمرير، تستخدم سمة التحويل تسريع الأجهزة، ويتم تحسين طريقة الأداء بشكل كبير. مقدمة عقدة الدعم وتتطلب مقدمة.
npm install listloading < div id =" listloading " >
< div >
< ul id =" order-list " > </ ul >
</ div >
</ div >البنية هي نفسها التي تم إنشاؤها بواسطة 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();
// }
// });سيتم تنفيذ التهيئة مرة واحدة، بشكل أساسي لإنشاء التمرير، ثم يتم تنفيذها بعد كل تحديث منسدل. عند تنفيذ البرنامج الخاص بك في الطريقة، يجب تنفيذ وظيفة رد الاتصال لإبلاغك بأنه 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 لدعمها الفني ومساهمتها في التعليمات البرمجية.
حقوق الطبع والنشر (ج) gtdalp. جميع الحقوق محفوظة.
مرخص بموجب ترخيص MIT.
