近期公司有一个项目是要开发一个移动端的基于页面的应用，其中需要完善的地方就是：尽量使这个看起来像个应用，于是就涉及到了页面的效果的问题。由于之前接触过的框架是jquery mobile，所以直接拿来用。刚初步解决了这个问题，总共分三步。
第一步，为了避免html之间链接跳转的硬伤，应用里面只留一个html。也就是所有的子页面都用“page + id” 的方法来实现，用“a href = ‘#xx‘ ”来实现跳转。光这样还是不够，所以第二步：将每个page上的“ position=‘fixed‘ ”删掉（如果有的话）。至此还是有些不尽人意：页面跳转还是不流畅，效果出来时有卡顿。最后第三步：在链接上面添加“ data-prefetch=‘true‘ ”，此作用为预取和缓存，用以提高跳转的效果。
另有人用修改css代码隐藏背景的方式来修复，个人觉得应该也是可以的，不过对于性能应该没有帮助。
由于时间仓促，所以大致的写出来分享，言语有不尽之处，还是用一段代码来结尾：
1 <html> 2 <body> 3 <div data-role="page" id="page1"> 4 5 <ul> 6 <li><a href="#page1" class="ui-btn-active ui-state-persist">第一页</a></li> 7 <li><a href="#page2" data-transition="flip" data-prefetch="ture">第二页</a></li> 8 <li><a href="#page3" data-transition="slide" data-prefetch="ture">第三页</a></li> 9 </ul> 10 11 </div> 12 13 <div data-role="page" id="page2"> 14 15 <ul> 16 <li><a href="#page1" data-transition="turn" data-prefetch="ture">第一页</a></li> 17 <li><a href="#page2" class="ui-btn-active ui-state-persist" data-prefetch="ture">第二页</a></li> 18 <li><a href="#page3" data-transition="pop" data-prefetch="ture">第三页</a></li> 19 </ul> 20 21 </div> 22 23 <div data-role="page" id="page3"> 24 25 <ul> 26 <li><a href="#page1" data-transition="turn" data-prefetch="ture">第一页</a></li> 27 <li><a href="#page2" data-transition="slideup" data-prefetch="ture">第二页</a></li> 28 <li><a href="#page3" class="ui-btn-active ui-state-persist">第三页</a></li> 29 </ul> 30 31 </div> 32 </body> 33 </html>
jquery mobile跳转闪屏问题浅析
时间： 2024-11-10 19:34:14