Project Summary One: use Iscroll in the project the pits that come across

Recently made a WEB APP project, the use of the famous iscroll, the effect of scrolling is really great, but the pit is also very much, the following summary, I hope since the latter has helped.

The project is now open source on GitHub, Https://github.com/ansiboy/ChiTuStore

First, using the abstract positioning

The top and bottom bars are best not to use fixed positioning and should use abstract positioning. I originally used fixed positioning, the page from the right to the left to render, often there are two questions: 1, the top bar from time to moment will disappear, 2, the new page in the process of moving, the top bar in the top column of the first page below, not expected in the stack up.

second, the picture asynchronous loading

page, if it contains a picture, the picture before loading and after loading, the size of the page is different, because the size of the page has changed, you must call the Iscroll Refresh method. But the truth is, it's hard to know when the picture is loaded. You must use the picture to load asynchronously and refresh the page when the picture is loaded.

The method I use is:

You are using the method of picture substitution. First use JS to generate a picture, the size of the image, and the actual picture size is consistent, this way the page will not be smaller because there is no picture, that is, the page in the image before and after the length of loading is the same. This solves the problem that the size of the page changes due to the asynchronous loading of the picture, which needs to be refreshed frequently.

Third, the input box keyboard pop-up

The following two pictures, is the keyboard pop-up before and after the comparison chart, to note that the page and the sidebar of the top bar are missing, because the top bar here is the abstract positioning, when the keyboard pops up, the entire document object, will move upward. So two of the top bars are gone. However, the top bar of the sidebar, when the keyboard disappears, will appear again, and the page will not. The workaround is to scroll again when input loses focus.

        if (Site.env.isIOS) {            var $input = $ (this. node). Find (' input[type= "text"] ');            $input. Focusout (function  () {                console.log (' input focusout ');                $ (document). ScrollTop (0);                $ (document). ScrollLeft (0);            });        

Four, do not use on the Android machine

The effect that Iscroll uses on Android is not ideal. Especially the lower version of Andro, version 4.0. On Android, I use native scrolling

Summary

Generally speaking, Iscroll is still very good, especially for IOS system, it is necessary.

Project Summary One: use Iscroll in the project the pits that come across