使用HTML5构建iOS原生APP(2)
2014-08-21 10:42
369 查看
问题发生的场景是webview中有一些筛选器,当我点击(在手机上实际上是触摸)筛选器的时候,页面内容会发生变化,但完全是本地的,不涉及数据传输之类的。
这次要解决的体验问题是当点击事件发生的时候,页面会闪烁一下。
研究之后发现解决办法是把对
替换成:
代码很简单,但是新的问题出现了,当我按住选择器,然后我突然不想点了,我就会滑走手指,然后放开。我的预期当然是事件被取消,但是
所以我需要检测是否发生了touchmove事件,解决办法应运而生:
所以我们现在有一个变量
现在,页面不会再发生闪烁了。
今天要解决的问题是,当使用HTML5制作(webview)的时候,如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感觉。而原生UITableView之类的滚动非常快。
我之前考虑的原因是,可能浏览器渲染webview的重绘非常困难,比如各种绝对定位,华丽的CSS,所以iOS系统选择了降低滚动速度以增强webview滚动时的FPS。
实际上不是这样的,可能是由于使用场景不同,苹果认为用户浏览网页的时候,需要页面滚动不用那么快,所以对webview设置了更高的“减速率”,也就是scrollView的
当我们用HTML5制作应用程序的时候,希望模拟原生组件比如UITableView的滚动速度,所以代码就很简单了:
这次要解决的体验问题是当点击事件发生的时候,页面会闪烁一下。
研究之后发现解决办法是把对
click事件的绑定替换成
touchend:
tagdom.addEventListener('click',function(ev){ ... }
替换成:
tagdom.addEventListener('touchend',function(ev){ ... }
代码很简单,但是新的问题出现了,当我按住选择器,然后我突然不想点了,我就会滑走手指,然后放开。我的预期当然是事件被取消,但是
touchend还是执行了,并且
ev.target仍然是之前的元素。
所以我需要检测是否发生了touchmove事件,解决办法应运而生:
var isScrolling = false; window.addEventListener('touchstart', function () { isScrolling = false; }); window.addEventListener('touchmove', function () { isScrolling = true; })
所以我们现在有一个变量
isScrolling来标志是否滑动了手指,如果没有发生过滑动,那么
touchend才生效:
tagdom.addEventListener('touchend',function(ev){ if(isScrolling == false){ ... } }
现在,页面不会再发生闪烁了。
今天要解决的问题是,当使用HTML5制作(webview)的时候,如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感觉。而原生UITableView之类的滚动非常快。
我之前考虑的原因是,可能浏览器渲染webview的重绘非常困难,比如各种绝对定位,华丽的CSS,所以iOS系统选择了降低滚动速度以增强webview滚动时的FPS。
实际上不是这样的,可能是由于使用场景不同,苹果认为用户浏览网页的时候,需要页面滚动不用那么快,所以对webview设置了更高的“减速率”,也就是scrollView的
decelerationRate属性。
当我们用HTML5制作应用程序的时候,希望模拟原生组件比如UITableView的滚动速度,所以代码就很简单了:
//滚动速度正常 self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
相关文章推荐
- 使用HTML5构建iOS原生APP(2)
- 使用HTML5构建iOS原生APP
- 使用HTML5构建iOS原生APP
- 使用HTML5构建iOS原生APP(2)
- 使用HTML5构建iOS原生APP
- 你知道吗?使用任何HTML5开发工具都可开发iOS、Android原生App
- 提交至APP STORE的APP和APP更新必须使用Xcode5.1.1(或更高级版本)及ios 7 sdk进行构建
- 使用HTML5构建iOS8原生APP
- iOS APP原生一维码、二维码扫描使用介绍
- ios--插件开发--借助wax框架使用lua开发原生iPhone App
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- Hbuilder,使用mui,HTML5 plus 开发Android,IOS的APP始末
- 猿题库iOS客户端的技术细节(一):使用多target来构建大量相似App
- iOS 同一个工程下 使用多target来构建大量相似App
- 工具链无效。新 App 和 App 更新必须使用公共(正式)版 Xcode 6 或更高版本以及 iOS 8 SDK 或更高版本来构建。请勿提交 Beta 版软件构建的 App。
- Hbuilder,使用mui,HTML5 plus 开发Android,IOS的APP始末
- 构建新的 App 和 App 更新时,必须使用公共(GM)版 Xcode 6 或更高版本、OS X 以及 iOS SDK。请勿提交使用 Beta 版软件,包括 Beta 版 OS X 构建的 App。
- iOS APP原生二维码使用介绍
- iOS 为什么使用xcode8上传app包到appStore无法构建版本
- 工具链无效。新 App 和 App 更新必须使用公共(正式)版 Xcode 6 或更高版本以及 iOS 8 SDK 或更高版本来构建。请勿提交 Beta 版软件构建的 App。