listloading
1.0.0
listloading เป็นส่วนประกอบแบบดึงลงและแบบดึงลงสำหรับอุปกรณ์เคลื่อนที่ซึ่งจะโหลดส่วนประกอบเพิ่มเติม โดยอาศัยส่วนประกอบที่พัฒนาโดยใช้ iscroll.js เวอร์ชัน 5.1.2 เป็นหลัก ไลบรารีพื้นฐานสามารถใช้ jquery.js หรือ zepto.js เพื่อดำเนินการโหนด dom ได้ ปัจจุบันฉันใช้ zepto.js เป็นไลบรารีพื้นฐานเพื่อดำเนินการ dom ซึ่งมีอยู่ใน รูปแบบของปลั๊กอิน jquery หากคุณไม่ต้องการใช้เป็นปลั๊กอิน คุณเพียงแค่ย้าย listloading โหลดลงในไลบรารีที่คุณต้องการโดยตรงเท่านั้น listloading ได้รับการออกแบบมาสำหรับเทอร์มินัลมือถือเป็นหลัก เมื่อใช้การเลื่อนในตัวของเบราว์เซอร์ ประสบการณ์ผู้ใช้จะไม่เป็นมิตรมากและแตกต่างจาก Android และ iOS มาก ดังนั้นฉันจึงเลือก iscroll.js การนำไปใช้งานคือการใช้ CSS3 ภาพเคลื่อนไหวแปลการแปลง 3 มิติเพื่อให้บรรลุ เอฟเฟกต์การเลื่อน แอตทริบิวต์การแปลงใช้การเร่งด้วยฮาร์ดแวร์ และวิธีการประสิทธิภาพได้รับการปรับปรุงอย่างมาก สนับสนุนการแนะนำโหนดและต้องมีการแนะนำ
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 ฟังก์ชั่นรีเฟรชการโทรกลับไม่จำเป็นต้องผ่านพารามิเตอร์
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
