jquery Mobile + Iscroll + iscrollview Development scrolling paging function

The initial project just chose the Iscroll framework for scrolling, and later, after integrating with the jquery Mobile (JQM) framework, the interface was not available.

Search for a lot of information on the Internet, after a variety of attempts still a lot of problems. Finally found on the Foreigner's website Jquery-mobile-iscrollview framework, used to integrate jquery mobile and iscroll an open source framework, dealing with a lot of jquery mobile and iscroll integration problems.

1, Jquery-mobile-iscrollview download address: Https://github.com/watusi/jquery-mobile-iscrollview

The extracted \jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\source path is the JS and CSS files that need to be referenced

The \jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\build path is a list of the various jquery mobile versions and examples of scrolling pages

In this path, I selected the Pull_14.html file, opened with Chrome, found the following navigation bar deformation, will

<link href= "stylesheets/demo.css" media= "screen" rel= "stylesheet" type= "Text/css"/>

<script src= "Javascripts/demo.js" type= "Text/javascript" ></script>

Once removed, the following navigation bar is OK

The Pull-example.js file referenced in the page is the processing of pull-up and drop-down events, so you can implement the data you need to load by modifying the Gotpulldowndata and Gotpullupdata functions.

2, direct testing of the function is not a problem, when the page pages to link to other pages, through the link to open the page, the following navigation bar has a problem

Later found, this is the problem may be due to the JQM external page link caused by the error. JQM When you open another page using an external link, you use Ajax to read the file that needs to be opened, and then dynamically load the file to the page that is already open, JQM only the first page taken out of the document (the first div with role= "page"), and everything else is ignored.

Later, all the loaded CSS and JS tags of the list page (b.html) are placed in the

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <meta name=" viewport "content=" width=device-width,initial-scale=1,maximum-scale=1, User-scalable=no "/> <meta name=" apple-mobile-web-app-capable "content=" yes "/> <meta name=" Apple-mobile-web-app-status-bar-style "content=" Black "/> <link rel=" stylesheet "href=". /jquery.mobile-1.4.2.min.css "type=" Text/css "> <link href=". /jquery.mobile.iscrollview.css "media=" screen "rel=" stylesheet "type=" Text/css "/> <link href=". /jquery.mobile.iscrollview-pull.css "media=" screen "rel=" stylesheet "type=" Text/css "/> <script src=". /jquery.js "type=" Text/javascript "></script> <script> $ (document). Bind (" Mobileinit ", function () {//
Allow Ajax cross-domain access $.mobile.allowcrossdomainpages = true;
}); </script> <script src= ". /jquery.mobile-1.4.2.min.js "type=" Text/javascript "></script> <script src=". /javascripts/iscroll.js "type=" Text/javascript "&GT;&LT;/SCRIpt> <script src= ". /javascripts/jquery.mobile.iscrollview.js "type=" Text/javascript "></script> <script src=". /javascripts/pull-example.js "type=" Text/javascript "></script>

When the link opens the page, the list page stabilizes

3. The version of the JQM framework referenced in Jquery-mobile-iscrollview is not high in the project, and after trying to replace the JQM version with the version used in the project, there is still no problem with the feature