使用HTML5构建iOS原生APP（2）

最新推荐文章于 2025-04-30 16:01:43 发布

小饕

最新推荐文章于 2025-04-30 16:01:43 发布

阅读量2.9k

点赞数

分类专栏： ios

ios 专栏收录该内容

276 篇文章

订阅专栏

本文探讨了在Webview中遇到的滚动事件与触摸事件冲突问题，通过调整事件监听器和设置滚动速度参数，有效解决了页面闪烁和滚动不流畅的问题，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题发生的场景是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;