Pull-down refresh on the Mobile End, iScroll. js usage, and pull-down iscroll. js

Pull-down refresh on the Mobile End, iScroll. js usage (reprinted), and iscroll. js

 

Sharing is the best way to spread and learn knowledge.

[Author]: Kick the front end

[Source]: http://www.cnblogs.com/duanhuajian/

[Statement]: All post titles plus (share) indicate excellent articles of others collected, while others are original.

Official Website: http://cubiq.org/iscroll-4

Summary

The iScroll 4 Version completely overwrites the original code of the iScroll framework. This project was created entirely because of the widespread use of mobile webkit browsers (such as iPhone, iPad, and Android)
Provides a localization method to slide the content of an element with a limited height and width. Unfortunately, in this case, the pages of all web applications cannot contain headers with position: absolute, footer, or content that can be rolled.
The middle area.
However, Apple seems reluctant to apply one-finger slide events to div elements as the latest version of the Android system supports this feature (although not very powerful.
In addition to the features of iScroll in earlier versions, iScroll 4 also includes the following features:
(1) Zoom (Pinch/Zoom)
(2) Pull refresh (Pull up/down to refresh)
(3) speed and Performance Improvement
(4) Precise Element capturing
(5) custom scroll bar
Reminder: iScroll 4 is not a simple alternative to iScroll 3, and the API documentation is different. At the same time, considering that this version is in the testing phase, Some APIs may slightly change.

User Guide

In this document, you will find many examples to teach you how to quickly get started with the iScroll script library. Please refer to the demo example in this article and read this document carefully. It may be a bit boring, but this article contains the essence of the iScroll script library.
IScroll needs to initialize the elements to be rolled, and does not limit the number of elements that use iScroll on a page (your hardware configuration is not considered here ). The type and length of the content in the rolling element will affect the iScroll script library to a certain extent.
Number of elements that can be used at the same time.
When using the iScroll script library, the structure of the DOM tree should be simple enough to remove unnecessary labels and avoid too many nested labels.
The optimal structure of iScroll is as follows:

<div id="wrapper">        <ul>               <li></li>               .....        </ul></div>

In this small example, ul labels will be rolled. IScroll must be associated with wrapper outside the scrolling content to produce results.
[Note ]:
Only the first child element in wrapper can scroll. If you want more elements to scroll, you can try the following method:

<div id="wrapper">        <div id="scroller">               <ul>                    <li></li>                     ...                </ul>                <ul>                     <li></li>                     ...                </ul>       </div></div>

In this example, the scroller element can be rolled, even if it contains two ul Elements

IScroll must be instantiated before calling. You can instantiate iScroll in the following situations:

　　(1) rolling with the onDOMContentLoaded event

Applicable to scrolling content that only contains text and images, and all images have fixed sizes.

 <script src="iscroll.js"></script>        <script>                var myscroll;                function loaded(){                           myscroll=new iScroll("wrapper");                 }               window.addEventListener("DOMContentLoaded",loaded,false);         </script>

Note: The myscroll variable is global, so you can call it anywhere.

(2) rolling with the onLoad event

Because the DOMContentLoaded event is called after the DOM structure is loaded, the length and width of the scroll area may not be determined before the image and other elements are loaded. In this case, you can use the onLoad event to implement the event.

<script src="iscroll.js"><script>        <script>                    var myscroll;                    function loaded(){                   setTimeout(function(){                            myscroll=new iScroll("wrapper");                     }，100 );                }                window.addEventListener("load",loaded,false);         </script>

In this case, iScroll will be initialized after page resources (including images) are loaded for ms. This should be a safer way to call iScroll.

 (3) inline Initialization

This situation will be called when the page is loaded to js. This method is not recommended, but many javascript experts are using this method. Why do I disagree?

<script src="iscroll.js"></script>                    <div id="wrapper">                            <ul>                                <li></li>                                 ...                          </ul>                  </div>        <script>                   var myscroll=new iScroll("wrapper");        </script>

However, we recommend that you use the ready method of Some Frameworks to securely call iScroll (for example, ready () in jquery ()).

 Parameters passed in iScroll

　　The second parameter in iScroll allows you to customize some content, such as the following code:

　　　　 <script>        　　var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});       </script>

The second parameter is usually an object, as in the above example, it is set to not display the scroll bar.Common parameters are as follows:
HScroll false disable horizontal scrolling true default value: true
VScroll false exquisite vertical scroll true vertical scroll default value true
HScrollbar false hide the scroll bar in the horizontal direction
VScrollbar false hide the scroll bar in the vertical direction
FixedScrollbar on iOS. When the drag of an element exceeds the boundary of scroler, the scroll bar shrinks. If it is set to true, the scroll bar cannot exceed
Visible area of scroller. The default value is true on Android, and false on iOS.
FadeScrollbar false indicates to hide the scroll bar when there is no gradient effect
HideScrollbar hides the scroll bar when there is no user interaction. The default value is true.
Bounce enables or disables boundary bounce. The default value is true.
Momentum enables or disables inertia. The default value is true. This parameter is useful when you want to save resources.
LockDirection false unlocks the drag direction. true: the drag can only be in one direction (up/down or left/right)

'Ull to refresh 'demo

Since Twitter and some Apple localization applications have seen this effect, it has become very popular. You can take a look.
In the latest version, the author splits the "pull to refresh" section as an additional plug-in for iScroll. You can click here to see how pull to refresh works. All you need to do is customize the pullDownAction () method. You may need ajax to load new content, but once the DOM tree changes, remember to call the refresh method. In this example, we add a latency of 1 second to simulate the network latency. Of course, if you don't want to use this latency, just remove the setTimeout method.

Zoom (pinch/zoom) 'ull to refresh 'demo

We have to face the fact that there is nothing new to rolling. This is why we allow you to release
Large and small. To use this function, you only need to set the zoom parameter to true to use gestures to zoom in and out. You can check it out here.
Double-click zoom-in and zoom-out functions are also supported in iScroll 4. To use the zoom function, you must at least configure the following:

 var myScroll =new iScroll("wrapper",{zoom:true});

If you want to customize the zoom function in depth, you can use the following options:
ZoomMax specifies the maximum allowed magnification. The default value is 4.
[Note]: If you want the image to scale well, you need to put them in the hardware compositing layer. In layman's terms, it is implemented by using-webkit-transform: translate3d (, 0) on all img elements to be scaled, and especially, hardware acceleration occupies a large amount of resources and must be used with caution. Otherwise, your application may crash.
Snap and snap to element 'usel' demo

The SNAP function is used to determine whether an element slides to a specified position. With this effect, you can create a fancy marquee effect.

The plug-in automatically analyzes the elements of the same label or size in the rolling area as the capturing object. You can also specify the captured object through parameters.

 var myscroll=new iScroll("wrapper",{                       snap:true,                       momentum:false,                       hScrollbar:false,                       vScrollbar: false                  });

You can set the snap parameter to specify a tag to set a snap object. For example, capture the li tag.

 var myscroll=new iScroll("wrapper",{                      snap:"li",                      momentum:false,                      hScrollbar:false,                      vScrollbar:false                });

In this example, scroller can capture the li element in the upper left corner of the scroll area.

Custom scroll bar (custom scrollbars)
In iScroll 4, you can use a series of css to customize the rendering of the scroll bar. You can add a class parameter to the scroll bar as follows:

var myscroll=new iScroll("wrapper",{
　　scrollbarClass: "myScrollbar"});

It should be noted that the scroll bar is composed of two elements: container and display. The height of the container is the same as that of wrapper, while that of the display is the scroll bar itself.
The HTML structure of the scroll bar is as follows:

　　　　　　　　　　<div class="myScrollbarV">                          <div></div>                  </div>                 .myscrollbarV{                           position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;                  }                .myScrollbarV > div {                           position:absolute;                           z-index:100;                           width:100%;                             /* The following is probably what you want to customize */                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));                           border:1px solid #800;                          -webkit-background-clip:padding-box;                          -webkit-box-sizing:border-box;                          -webkit-border-radius:4px;                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);                 }

 General method:

(1)RefreshThis method should be called when the DOM tree changes

Eg:SetTimeout (function () {myScroll. refresh () ;}, 0 );

(2)IScroll also provides three methods: scrollTo, scrollToElement, and scrollToPage, allowing you to control the scrolling effect through javascript.

ScrollTo (x, y, time, relative): Set the position of the content scroll bar x/y within the specified time. For example, myScroll. scrollTo (0,-100,200) rolls 200 pixels downward on the Y axis within 100 milliseconds. MyScroll. scrollTo (0, 10,200, true) enables 10 pixels to scroll up the Y axis within 200 milliseconds relative to the current position.

ScrollToElement (element, time): Scroll to the specified element within the specified time. For example, myScroll. scrollToElement ('li: nth-child (10) ', 100) Scrolls to the position of 100 li elements within 10th milliseconds. You can use the selector in CSS3 to filter the 1st parameters.

SnapToPage (pageX, pageY, time): Scroll from 200 pages to 1st pages within 2nd milliseconds (0 indicates 1st pages and 1 indicates 2nd pages ). This function can be called when the SNAP function is used.

(3)Detroy ()Completely eliminate myscroll and its occupied memory space
Eg: myscroll. destroy ();

MyScroll = null;

IScroll Development Direction

• Support for form fields
• Scaling Optimization
• Better desktop browser compatibility
• OnScrol event Optimization
• Add hash value changes
• Automatically Refresh after DOM changes