Enhance HTML5 performance Experience series three smooth pull-down refresh and pull-up

　　

Drop-down Refresh

To implement the pull-down refresh feature, most H5 frames are pulled back by a div simulation, and on low-end Android phones (Android4.4), the Div animation often appears in the case of a list of cards.
Solutions or WebView.

Since pull div card, then don't pull div, change pull webview. WebView's pull is the original, the rebound effect is also the original, experience and the same as the original.
The idea is to write a "drop-down can refresh" in the Titlebar,titlebar below 10 pixels below the parent page.
Then append a sub-webview and set it to drop down.
Then when the handle webview down, will reveal the parent page "drop can refresh" the word, and pull to a certain distance will trigger an event, JS captured to this event can be changed after the "drop-down can be refreshed" to "release can be refreshed." Releasing also triggers an event.

Currently this solution is only available on Android, there is no performance problem with iOS and can still be achieved with Div pull.

To help developers set up a code to solve the problem, the MUI framework encapsulates 2 scenarios in a uniform way.
Reference: http://dev.dcloud.net.cn/mui/pulldown/

Of course, iOS 5+runtime also support and Android-like native pull-down refresh, on the iOS div method is not satisfied with the students can also directly use the native drop-down refresh, but the style is not customizable.

Pull Up page

The most common list in the app is when you scroll to the bottom to load the next page of content.
The traditional idea is to rely on the JS monitoring scroll bar position to achieve. This causes the listener event to trigger when any scrolling list is triggered, which can easily cause the list to slip.
Html5plus expands an event, which is the native drop-down event, which is automatically triggered when the WebView scroll bar is to the bottom.
So JS just listen to this pull the event can be, improve the performance of the app execution.
5+ API Reference: http://www.html5plus.org/#specification #/specification/events.html
MUI Package reference: http://dev.dcloud.net.cn/mui/pullup/

These code examples are available in both the Hello h5+ and the Hello MUI.

Enhance HTML5 performance Experience series three smooth pull-down refresh and pull-up