listloading.js
Listloading is a pull-up and pull-down loading of more components on the mobile side. It mainly depends on the components developed on the basis of iscroll.js v5.1.2. The base library can use jquery.js or zepto.js to operate DOM nodes. At present, I use zepto.js as the base library to operate dom, which exists in the form of jQuery plug-in. If you don't want to use it as a plug-in, you just need to migrate listloading directly into the library you need. Listloading is mainly for the mobile side. It uses browser to scroll with it. The user experience is very unfriendly. It is very different from Android and ios. So we choose iscroll. js, which is implemented by using css3 animation translate. The rolling effect is achieved by 2D conversion. The transform ation attribute is accelerated by hardware, and the performance method is greatly improved.
npm installation
npm install -g listloading
The method of use is as follows:
1. html structure
The structure created by iscroll is the same, but the specified created element node must specify the ID, because publishing subscription patterns within the component requires an identification. Because iscroll must set the height before creating the node element, otherwise it will not scroll; iscroll is created to scroll the first child element, so the pull-up and pull-down refresh of listloading are added to the first child element, in fact, the first child element can be imagined as body in html.
-
<div id="listloading"> <div> <ul id="order-list"></ul> </div> </div>
2. js to be introduced
<script src="../src/jslib/zepto.min.js"></script> <script src="../src/jslib/iscroll.js"></script> <script src="../build/listloading.js"></script>
3. Call
var m = 3, n = 0;
// The height of the parent element must be set before iscroll is created, otherwise iscroll cannot be dragged.
$('#listloading').height($(window).height());
// Template or ajax request method
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">Pull-down refresh component on mobile end...</li>';
}
return __html;
}
// The selector must be ID because publish subscriptions are used for identification.
var listloading = $('#listloading').listloading({
disableTime: true, // Whether display time is required
pullUpAction : function(cb){ //Pull-up Load More
m--;
var flg = false;
var __html = createHtml();
if(m < 1){
flg = true;
}else{
$('#order-list').append(__html);
}
// When the data is loaded, it needs to return the end to true for the whole data to be loaded.
cb(flg);
},
pullDownAction : function(cb){ //Drop-down refresh
m = 3;
n = 0;
var __html = createHtml();
$('#order-list').html(__html);
// After executing the execution method, the callback must be executed to notify that the default load has been completed and that the program needs to create iscroll.
cb();
},
// API of iscroll
iscrollOptions: {
//
}
});
// Click events because iscroll prevents bubbles. It also suggests writing click methods. If you turn on preventDefault to false, it will solve the onclick failure problem. But if you turn on this value, dragging under Wechat will cause problems and scrollend will not be triggered after the end of sliding. So I embedded an event method.
listloading.evt('li', 'click', function (dom) {
// dom.remove();
// $('#order-list').append(createHtml());
// listloading.refresh();
});
Design sketch
4,API
4.1 drop-down refresh
Initialization will be executed once, mainly to create iscroll, and then after each drop-down refresh, when the method is completed, you need to execute a callback function, informing that all the programs have been executed, listloading will automatically call iscroll's refresh function, callback does not need to pass parameters.
options.pullDownAction = function(cb){ //Drop-down refresh
.....
// Callbacks must be executed after the execution method has been executed
cb();
}
4.2 Up-pull Refresh
After each pull-up refresh is completed, the same callback function needs to be executed after the execution of your program. A Boolean value needs to be called back in the callback. If true, how can it be fully loaded?
options.pullUpAction = function(cb){ //Drop-down refresh
.....
// After executing the execution method, the callback true must be executed to the bottom
cb(true);
}
4.3 Destroy List Loading
listloading.destroy();
4.4 refresh listloading
If the scrolling area node has been added or deleted, this method needs to be called after the operation is completed.
listloading.refresh();
4.5 Whether the default display time value is false
true drop-down display time, time from last refresh
options.disableTime = true
4.6 Up-Pull Refresh Text
options.upLoadmoretxt = 'Up-pull refresh text'; // html tags can be placed inside
4.7 Drop-down refresh text
options.pullDrefreshtxt = 'Dropdown refresh text'; // html tags can be placed inside
4.8 Loading Chinese Characters
options.loadertxt = 'Loading Chinese characters'; // html tags can be placed inside
4.9 Release and refresh text
options.Realtimetxt = 'Release and refresh text'; // html tags can be placed inside
4.10 Has Loaded All Texts
options.loaderendtxt = 'All loaded text'; // html tags can be placed inside
4.12 Configuration of iscroll
options.iscrollOptions = {};
github Download Address: https://github.com/gtdalp/listloading.git If you think it's okay, please give me a Star Bar O(____)~
Please indicate the address for forwarding: https://github.com/gtdalp/listloading.git