Better-scroll implementation drop-pull refresh, pull load more (giant simple ...) ）

1, nonsense less said, first look at the mobile end of the list page

(1) Normal browsing

(2) down-Pull Refresh

(3) drop down refresh End

(4) Up-pull loading

(5) Up-pull loading

2, the above is basically a set of mobile end list refresh process, using Better-scroll implementation, its GitHub address can refer to Https://github.com/ustbhuangyi/better-scroll

3, there are some basic use of the online tutorial, here is not a drag, the following mainly say some things to note

(1) Considerations in the HTML definition

New window. Bscroll when the incoming DOM object, in addition to the UL list, but also include and UL list of other div (such as: dropdown hint information), UL and its lateral div the most outer layer must also want to use another div package,

PS: Because the principle of bscroll is to give new window. Bscroll the first-level child of the incoming DOM object plus transition animation, and so on, as follows: The blue arrow is the new Bsroll incoming object

(2) JS in the matters needing attention

Scene: If you want to pull or pull the data after the success of the request, give a message, and the hint of HTML is dynamically added through JS,, add to the body of the first level, pull, pull down will be invalid

Workaround, you can define a DOM element beforehand, hide it, and then control the display of the DOM element once the request succeeds, as shown in the following example

4, if you want to see demo, small partners can go to GitHub download OH:

Https://github.com/chuanzaizai/scroll-demo