微信小程序开发踩坑之路--2 事件穿透

很久没更新博客了,最近实在是忙~疲惫的分割线~ (=_=) "

今天要说的是一个小程序踩坑的事 —— 触摸滚动事件的穿透,相信很多用过模态(Modal)弹窗之类的同学都知道,一般会让底部的内容不可操作;而我遇到的问题是底部的内容是可滚动的,而出现的弹窗也是可滚动的,但是,当你在弹窗中滚动到尽头,再次继续滚动,滚动事件就会穿透到 modal 下面的内容,让内容滚动,这种情况下如何解决滚动事件的穿透呢?

接下来上代码,为了保护公司权益,这里使用自己写的一个简单demo,能达到测试目的就好:



  我是内容




  

    
      我是模态
    

  

微信小程序开发踩坑之路--2 事件穿透_第1张图片

上图中模态窗口已经滚动到底部,继续滚动时,发生滚动穿透,触发了底下的内容滚动。

如何解决? 这种事件穿透其实就是滚动事件冒泡了,触发了page 的滚动事件,而我们的内容是直接写在 page 内的,这里的 page 是小程序每个页面都会默认存在的最外层标签,就和 H5 中的 html 标签一样,就算不谢html 标签,渲染后,你还是会看到你的内容包含在 html 标签内。 从这可以显而易见的知道,包裹内容部分的容器 page 触发了滚动事件,我们的内容当然也就开始滚动了。

解决翻案很简单,只要我们不让模态窗口的滚动事件触发到底下内容的父容器,同时让内容超出的部分滚动就可以完美解决这个事件穿透的问题。我这里给内容区一个父容器,让父容器布满全屏,超出部分可滚动。这样我们的模态窗口和内容区的父容器是兄弟节点,滚动事件就不会冒泡到内容区的父容器,并触发滚动事件。看下面代码



  
    我是内容
  




  
    
      我是模态
    
  

微信小程序开发踩坑之路--2 事件穿透_第2张图片

现在不会触发滚动事件了。

你可能感兴趣的:(微信小程序)