使用HTML5构建iOS原生APP(2)

问题发生的场景是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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值