jquery mobile是一个好框架,虽然我没用过Sencha Touch,但据说学习成本要比jq mobile大很多,从目前web app ui框架选择少的情况来看,jq mobile是最好的选择。
jquery本身已是一个成熟的框架,jq mobile作为它的附属,继承了 write less,do more 的传统。
但是作为一个新兴起的项目,毛病也是有不少。我在运用到项目中时,发现了如下问题并积累了下解决方法。
1.页面转场时,当前页会先回到顶部,再跳转到目标页
相信在jquery mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,jquery mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改jq mobile的源码(但效果不好),折磨了一段时间后,迎来了jquery mobile的更新,然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们,赶紧去下新版的jq mobile。
2.页面转场闪屏问题
在页面转场时,页面内容经常会闪动,特别对于slide效果,fade的话没那么严重但也还是会觉察到闪动。这对于用户体验是致命伤,原因是手机浏览器对于css3的支持还不算太好。解决的方法就是让页面转场效果进行的时候,先将内容背景隐藏,加上下面的一段CSS
需要注意的是你的jquery最好使用 1.7.1或以上的版本,否则有上面的css也可能还是会闪屏。
1.7版的jquery加多了对CSS3的支持和兼容,可以说是为移动端而设计的,假如你正在开发web app,有什么理由不用它呢?
3.tab选择之后back不能恢复原始状态问题
在几个均有导航的页面如果其中有一个页面有tab页面,选择非默认的之后,返回上一个页面,之后在回来,没有采用默认的那个tab选中并改变默认颜色。可以采用如下代码:ui-btn-active表示选中样式
<!-- header --> <div data-role="header" data-position="fixed"> <a data-icon="arrow-l" data-Iconpos='left' data-rel="back" >返回</a> <h1>属性管理</h1> <div data-role="navbar" data-grid="a" > <ul > <li id="1"><a id="TypeURL" href="#" >类型</a></li> <li id="2"><a id="areaURL" href="#" >区域</a></li> </ul> </div><!-- /navbar --> </div>
if(tabId=="1"){ //类型 $("#content-first").css("display","block"); $("#content-second").css("display","none"); divId="#content-first"; $("#TypeURL").addClass("ui-btn-active"); $("#areaURL").removeClass("ui-btn-active"); queryURL=AssertAttrWSURL.queryAllAssetType+"/"+stationCode+"/"+pageNum; }else if(tabId=="2"){ //区域 $("#content-first").css("display","none"); $("#content-second").css("display","block"); divId="#content-second"; $("#TypeURL").removeClass("ui-btn-active"); $("#areaURL").addClass("ui-btn-active"); queryURL=AssertAttrWSURL.queryAllArea+"/"+stationCode+"/"+pageNum; }
4.特殊情况下选中相关问题连接没有加载
解决的方案有两种:
1.采用非ajax调用(data-ajax='false',rel="external" , data-ajax="false" )
2.采用同一个页面多个page模式,采用pageshow加载并初始化。
兄弟,采用jquery-mobile-1.1.0的版本吗?如果不是那么可能还是有问题,最好采用1.1.0版本。
相信在jquery mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,jquery mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改jq mobile的源码(但效果不好),折磨了一段时间后,迎来了jquery mobile的更新,然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们,赶紧去下新版的jq mobile。
我用的就是jq mobile 1.1.0 版本,也不行。
相信在jquery mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,jquery mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改jq mobile的源码(但效果不好),折磨了一段时间后,迎来了jquery mobile的更新,然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们,赶紧去下新版的jq mobile。
我用的就是jq mobile 1.1.0 版本,也不行。
你的jquery的版本是多少呀?最好是1.64或者1.7
建议自定义主题样式,不要采用默认的样式。
相信在jquery mobile 1.1.0 版本出来之前,每个人都会遇到的问题。页面短的还好,假如页面内容很长,每次页面转换时都能明显的看到滚动条自动回到顶部的一下操作,更可怕的是当你返回上一页时,jquery mobile会恢复你上次浏览的位置,滚动条又从顶部跳回你之前的地方。
这种页面的错顿感严重影响用户体验,特别是在android的手机上。各种搜索引擎无果后,曾经我避免把页面长度做得超过1屏,也尝试修改jq mobile的源码(但效果不好),折磨了一段时间后,迎来了jquery mobile的更新,然后 1.1.0版本解决了这个问题。
所以如果还被这个问题困扰的同学们,赶紧去下新版的jq mobile。
我用的就是jq mobile 1.1.0 版本,也不行。
你的jquery的版本是多少呀?最好是1.64或者1.7
我用的phonegap 1.8 + jquery mobile 1.1.0 + jquery 1.7.1还是不行,每次跳转页面都会回到顶部,方便看看你这方面的 代码吗?
http://pernghh.pixnet.net/blog/post/35164141-%E8%A7%A3%E6%B1%BA%E5%9C%A8-android-%E4%B8%AD%E4%BD%BF%E7%94%A8-bitmap-%E9%80%A0%E6%88%90-out-of-memory-%E7%9A%84
http://www.android123.com.cn/kaifafaq/594.html 临时空间
http://www.cnblogs.com/TerryBlog/archive/2010/08/04/1791934.html 弱引用imageview
在Android中,phonegap的默认首页是index.html,可以通过super.loadUrl("file:///android_asset/www/index.html");自由配置。
那么在ios内,是在AppDelegate.m中修改
self.viewController.wwwFolderName = @"www";
self.viewController.startPage = @"index.html";