Listloading.js Mobile end pull down pull down refresh component _javascript tips

Listloading is a moving end of the Oberra, Drop-down loading of more components. Relying primarily on components developed on the basis of Iscroll.js v5.1.2, the underlying library can operate DOM nodes using Jquery.js or zepto.js, and I am currently using zepto.js as the underlying library operations DOM, in the form of a jquery plug-in. If you do not want to use plug-ins, you just need to transfer listloading directly to the library you need to be OK. Listloading is mainly for the mobile side, in the use of the browser with scrolling, the user experience is very unfriendly, and Android and iOS very different, so choose Iscroll.js, it is implemented using CSS3 animation translate 2D conversion to achieve scrolling effect, The Transform property uses hardware acceleration, and performance methods are greatly improved.

NPM Installation

Copy Code code as follows:

NPM install-g listloading

Use the following methods:

1, HTML structure

As with the structure created by Iscroll, the specified element node must specify an ID because it requires an identity to publish the subscription pattern within the component. Because Iscroll must set a height before the node element is created, it will cause it to fail to scroll; Iscroll creation is specified to scroll the first child element, so the listloading pull and drop flushes are appended to the first child element, In fact, the first element of the image into the HTML inside the body can be.

2, the need to introduce JS

<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 the 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 < 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 C
lass= "text" > Move pull down pull down to refresh component ...</li> ';
return __html;  The//selector must be ID because the publication subscription is used to identify var listloading = $ (' #listloading '). Listloading ({disabletime:true,//Whether you need to display time pullupaction: Function (CB) {//Pull load more m--var flg = false; var __html = createhtml (); if (M < 1) {FLG = true;}
else{$ (' #order-list '). Append (__html);}//Data loading is completed to return end to true for all data loaded CB (FLG); Pulldownaction:function (CB) {//Drop-down refresh m = 3; n = 0; var __html = createhtml (); $ (' #order-list '). HTML (__html);//Execute execution The role of the callback callback after the method is to notifyThe default load has all been completed, the program needs to create Iscroll CB ();
},//Iscroll API Iscrolloptions: {//}}); Click event because Iscroll blocks bubbles, it also recommends that you write the click Method, if you open Preventdefault to false this line is to resolve the onclick failure problem, but to open this value under the micro-letter drag will be a problem The scrollend is not triggered when the slide is over, so I have embedded an event method listloading.evt (' Li ', ' click '), function (DOM) {//Dom.remove ();//$ (' #order-list ')
. Append (createhtml ());
Listloading.refresh (); });

Effect chart

/p>

4, API

4.1 Pull down Refresh

Initialization will be performed once, mainly to create Iscroll, after each drop-down refresh after the end of execution, when the method inside the completion of your program needs to perform a callback function, told that all programs have been completed, Listloading will automatically invoke Iscroll refresh function, Callback does not require a reference.

Options.pulldownaction = function (CB) {//dropdown refresh
...
A callback CB () must be executed after execution of the execution method
.

4.2 Pull Up Refresh

After each pull refresh is done, the same after the execution of your program needs to execute a callback function, the callback needs to call back a Boolean value, if true how it has all loaded, it has been pulled to the end.

Options.pullupaction = function (CB) {//dropdown refresh
...
You must perform a callback true to pull down to the end of
CB (TRUE) after the execution method has completed;

4.3 Destroy listloading

Copy Code code as follows:

Listloading.destroy ();

4.4 Refresh Listloading

Scrolling area nodes have additions and deletions need to call this method after the operation is complete

Copy Code code as follows:

Listloading.refresh ();

4.5 Show time default value is False

True Drop-down display time, distance from last refresh

Copy Code code as follows:

Options.disabletime = True

4.6 Pull Refresh Text

Copy Code code as follows:

Options.uploadmoretxt = ' Pull up refresh text '; You can put HTML tags inside.

4.7 Dropdown Refresh Text

Copy Code code as follows:

Options.pulldrefreshtxt = ' Drop-down refresh text '; You can put HTML tags inside.

4.8 Loading Chinese text

Copy Code code as follows:

Options.loadertxt = ' loading in text '; You can put HTML tags inside.

4.9 Release Refresh Text

Copy Code code as follows:

Options. Realtimetxt = ' release refresh text '; You can put HTML tags inside.

4.10 has loaded all the text

Copy Code code as follows:

Options.loaderendtxt = ' already all loaded text '; You can put HTML tags inside.

Configuration of 4.12 Iscroll

Copy Code code as follows:

Options.iscrolloptions = {};

The above is a small set to introduce the Listloading.js mobile end pull down the refresh component, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!