使用HTML5构建iOS原生APP(2)
来源:互联网 发布:淘宝网访问验证 编辑:程序博客网 时间:2024/04/30 18:38
问题发生的场景是webview中有一些筛选器,当我点击(在手机上实际上是触摸)筛选器的时候,页面内容会发生变化,但完全是本地的,不涉及数据传输之类的。
这次要解决的体验问题是当点击事件发生的时候,页面会闪烁一下。
研究之后发现解决办法是把对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;
0 0
- 使用HTML5构建iOS原生APP(2)
- 使用HTML5构建iOS原生APP(2)
- 使用HTML5构建iOS原生APP
- 使用HTML5构建iOS原生APP
- 使用HTML5构建iOS8原生APP
- ios原生app启动原生app
- 从Android原生角度看移动html5开发APP(一)原生与html对比
- Html5+APICloud插件支持IOS和安卓原生APP开发
- HTML5与原生APP之争胜负已出?
- 原生 APP 与 HTML5 哪个好?
- TOWebViewController(Convert HTML5 To IOS App)
- HTML5启动手机中的APP(IOS)
- 使用原生HTML5上传文件
- Rxjava2使用-构建事件总线(RxBus)代替原生广播
- 纯HTML5 APP与原生APP的差距在哪?
- 纯 HTML5 APP与原生APP的差距在哪?
- 纯HTML5 APP与原生APP的差距在哪?
- 使用phonegap包装html5网页为iOS app
- MySQL Cluster技术详解
- 【创业者说】失控的创业
- Eclipse 下 Maven 如何进行 Debug?
- 两个线程A和B,任务都是打印当前时间,要求编码实现:线程A和B同时启动后,以先A后B的方式任务交叉执行10次。
- UVa 400题记录
- 使用HTML5构建iOS原生APP(2)
- java中ServletContext 对象的获取方法
- BootStrap2.x中的时间选择控件
- java中抽象类和抽象方法到底什么关系?请举例说明!
- JavaScript实现超大字符串运算减法
- Linux内核开发:使用 Git 管理源代码
- C#预编译指令
- Android消息处理机制(好文)
- DRBD部署