listloading is a mobile pull-up and pull-down loading more components. It mainly relies on components developed based on iscroll.js v5.1.2. The basic library can use jquery.js or zepto.js to operate the dom node. Currently, I use zepto.js as the basic library to operate the dom, and exist in the form of a jquery plug-in. If you don't want to use it as a plug-in, you just need to directly port the listloading into the library you need, it's OK. Listloading is mainly designed for mobile terminals. When using the browser, it comes with scrolling. The user experience is very unfriendly and is very different from Android and iOS. Therefore, it chooses iscroll.js. Its implementation method is to use css3 animation translate 2D conversion to achieve the scrolling effect. The transform attribute uses hardware acceleration, and the performance method has been greatly improved.
npm installation
The code copy is as follows:
npm install -g listloading
How to use it is as follows:
1. HTML structure
The same structure as the iscroll created, but the specified created element node must specify the ID, because a identifiable identity is required for publishing the subscription mode in the component. Because the iscroll must set the height before the node element is created, otherwise it will not be scrollable; the iscroll is created and is assigned to the first child element to scroll, so the pull-up and drop-down refresh of listloading is also added to the first child element. In fact, just imagine the first child element as the body in html.
2. js that need 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;// You must set the height of the parent element before creating an iscroll, otherwise you cannot drag iscroll$('#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></span><p><time>' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p>Mobile pull-up and pull-down refresh component...</li>';}return __html;}// The selector must be an ID because it is necessary to use publish subscription as the identifier var listloading = $('#listloading').listloading({disableTime: true, // Whether to 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);}// After the data is loaded, it is necessary to return end to true. If all data is loaded cb(flg);}, pullDownAction : function(cb){ // Pull down to refresh m = 3;n = 0;var __html = createHtml();$('#order-list').html(__html);// After the execution method is executed, the callback must be executed. The function of the callback is to notify that the default load has been executed. The program needs to create iscrollcb();},// iscroll API iscrollOptions: {//}});// Because iscroll prevents bubbles, it also recommends writing the click method by itself. If you enable preventDefault to false, this line will solve the problem of onclick failure. However, if you open this value and drag it under WeChat, there will be problems. After the slide ends, scrollend cannot be triggered. So I embedded an event method myself listloading.evt('li', 'click', function (dom) {// dom.remove();// $('#order-list').append(createHtml());// listloading.refresh();});Reproduction diagram
/p>
4. API
4.1 Pull down to refresh
The initialization will be executed once, mainly to create an iscroll, and then each pull-down refresh is executed after the end of each pull-down refresh. After the execution of your program in the method, a callback function needs to be executed to inform all programs that have been executed, listloading will automatically call the iscroll refresh function, and the callback does not require a parameter transmission.
options.pullDownAction = function(cb){ // Pull down to refresh....// After executing the execution method, callback cb() must be executed;}4.2 Pull-up refresh
Each pull-up refresh is executed after the refresh is completed. The same is required to execute a callback function after executing your program. A Boolean value is required in the callback. If it is true, why has it been loaded and it has been pulled to the end.
options.pullUpAction = function(cb){ // Pull-down refresh....// After executing the execution method, the callback must be true to pull down to the end cb(true);}4.3 Destroy ListLoading
The code copy is as follows:
listloading.destroy();
4.4 Refresh listloading
If there are additions and deletions in the scrolling area node, you need to call this method after the operation is completed.
The code copy is as follows:
listloading.refresh();
4.5 Whether to display the time default value is false
true pull-down displays the time, the time from last refresh
The code copy is as follows:
options.disableTime = true
4.6 Pull up to refresh the text
The code copy is as follows:
options.upLoadmoretxt = 'pull up to refresh the text'; // You can put html tags in it
4.7 Pull down to refresh the text
The code copy is as follows:
options.pullDrefreshtxt = 'Drag down to refresh the text'; // You can put html tags in it
4.8 Loading Chinese characters
The code copy is as follows:
options.loadertxt = 'Chinese characters are loading'; // You can put html tags in it
4.9 Release refresh text
The code copy is as follows:
options.Realtimetxt = 'release refresh text'; // You can put html tags inside
4.10 All texts have been loaded
The code copy is as follows:
options.loaderendtxt = 'All text has been loaded'; // You can put html tags in it
4.12 iscroll configuration
The code copy is as follows:
options.iscrollOptions = {};
The above is the Listloading.js mobile terminal pull-down refresh component introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!