jquerymobile1.4开发过程中遇到的一些问题总结

最近用JqueryMobile+phonegap做一个小项目,发现不知道是我用法有问题还是本身框架就有bug,总是出现一些怪问题,现在把出现问题的解决方法和一些经验写出来供大家参考,版本JqueryMobile1.4。

1.重复绑定问题,网上已经有很多人给出解决办法,我的解决办法是在绑定事件前先解除绑定

将绑定事件写到pageshow中:

      $(document).off("pageshow").on("pageshow","#register_query1",function(){
$("#aaa").off("tap").on("tap",function(){
$.mobile.changePage(jsRootPath+"/html/main.html",{transition:"slidefade"});
});

              });


2.跳转页面都使用$.mobile.changePage,不使用缓存的back,发现使用缓存的返回有时会跳转混乱


3.页面跳转后清除历史页面,jqm的异步加载时把目标页面的dom加载到第一个页面中,所以如果不清除,dom会越来越大,而且可能引发一些问题,我们在页面跳转后清除掉不用的历史页面。在每个页面的pagehide事件中清除。

$(document).on("pagehide", "#mypage", function(event){
$(event.target).remove();
});


4.选择性清除。有时我们有这样的需求,a页面是菜单主页面,b页面是查询页面,c页面是详情查看页面,一般操作流程时a跳转到b,点击b中的list列表在显示c页面的详情,这时我们希望实现的是,从b页面跳转到c页面不清空b页面的内容,这样c页面返回到b页面时,b页面的内容还是点击之前的,不重新加载,不然翻页的内容定位不到,但是b页面返回到a页面时,b页面内容就可以清楚,因为从菜单页进入b页面可以重新查询。前面在网上看有个人提供了方法,但一个是比较复杂,还一个是基于以前老的版本,1.4不能使用,我的做法是判断返回的页面,选择性清空。

$(document).on("pagehide", "#register_query1", function(event){
 var var_url = event.target.baseURI;
  if(var_url != null && var_url.indexOf("/main.html")>0){
  $(event.target).remove();
 }
});


5.一些插件的使用,jqm带的遮屏和一些弹出的并不好用,还可以点击后面的元素,而且弹出框控件使用多个貌似还会出现层覆盖等一些怪问题。我项目中遮屏和弹出使用的layer的mobile版,感觉效果不错,使用方便。listview翻页使用iscrollview,日历控件使用mobiscroll,图片预览使用fancy,上述的插件使用起来都还比较方便,而且效果还不错。使用方法大家网上搜一下,都比较多。


6.一个页面使用一个page div,我是这样的原则,觉得清晰一点


目前遇到的一些关键问题就是这些,其他一些网上已经很多的解决方法的问题就不列出了。


你可能感兴趣的:(JqueryMobile,移动开发)