最近使用uniapp开发一个微信小程序,开发过程中在微信开发者工具中测试一切正常,真机测试时安卓系统也正常,但是在ios系统下有一个组件功能始终无法通过。经排查,该组件使用了color-ui的弹出框,在弹出框里面又使用了scroll-view容器,但是scroll-view容器里的内容却无法正常滑动。
使用百度搜索相关问题,对弹框元素使用了catchtouchmove属性,依旧没有用。然后就想通过控制台看一下到底为什么没有生效,于是对弹框元素和父级元素添加了@touchmove事件做输出,弹框元素输出bbb,父级元素输出aaa,并且在弹框元素的touchmove事件中使用stopPropagation()方法禁止事件向父级传递:
//弹框touchmove事件方法
mytouchmove(e){
console.log('bbb');
e.stopPropagation();
}
测试发现:控制台输出bbb后,依旧输出了aaa,等于stopPropagation()没生效。于是去uniapp官网查文档,发现了这样一段内容:
那么,原因就很明显了,要使用@touchmove.stop方法做监听即可,再次使用ios真机测试,scroll-view内容可以正常滑动了,至此,问题解决!