weex开发之手势事件冲突解决

在开发中在使用weex手势事件时遇到了问题,在Android端,当给某个容器类元素上添加手势事件或者绑定bindingX表达式之后,如果在这个容器内部添加了list或者scroller等滚动元素,就会导致手势事件无法触发。

我们看到weex官方文档在手势部分说明“目前,由于会触发大量事件冲突,Weex Android 还不支持在滚动类型的元素上监听手势,例如 scrollerlist 和 webview这三个组件”。那么我们如果真的有在滚动元素上监听手势事件的需求的话怎么解决这个问题呢,下面给出几种解决方案:

1、使用swipe或者horizontalpan/verticalpan

我们发现这两个事件即使我们嵌套了滚动元素也是可以正常触发的,如果不需要实时的获取手势状态改变元素状态,那么使用这个两个事件是不错的选择,比如列表的侧滑删除,我们就可通过使用horizontalpan就能满足需求,这里我们需要注意的是swipe事件是与click事件冲突的。

2、解决事件冲突

    因为weex的事件默认是从里往外冒泡的,即内层事件优先被处理,外层的事件会被内层事件打断,因此不能在滚动元素或者其外层元素使用touch和pan手势,会被滚动事件打断,我们可以在滚动元素的所有根子元素上添加手势事件绑定,配合prevent-move-event属性,就可以解决事件冲突。

例子:

我们的需求是真个list跟随手指移动,看到需求我们首先会想到把手势事件给到这个list或者list的容器上,但是我们发现事件无法被正常触发,如上面所说的,list的滚动事件是优先于container的手势事件触发的,因此最外层div的手势事件无法被正常触发。那么我们把事件给到list的每一个根子元素,并设置prevent-move-event="true",这个属性官方并没有给出,通过阅读weex相关的源码,了解到这个属性是阻止事件向上传递或者说使得事件不会被系统事件(scroll事件等)打断。

<div ref="container"  @pansart="pansart" @panmove="panmove">
     <list ref="list">
        <cell class="cell_item" v-for='i in 10' :prevent-move-event="true" @pansart="pansart"  @panmove="panmove">
               
          <div>
          </div>
        </cell>
     </list>
</div>
<script>
 export default {
    methods:{
        
        pansart(){
            
        }
        panmove(){
           //我们的需求是这里对移动整个list的容器
        }

    }
 }
</script>

如有问题,欢迎提问。

如另有高见,还望不吝赐教!

我的weex相关博客:weex开发系列

我的开源weex模板项目:IWeex

发布了49 篇原创文章 · 获赞 19 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_33718648/article/details/93395789