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

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

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

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

<!-- 为了更容易看到效果，这里复制了60行 -->
<block wx:for="{{60}}" wx:key='1'>
  <view>我是内容</view>
</block>

<!-- 下面是模态窗口 -->
<view style='position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.6);'>
  <view style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:50vh;background-color:#fff;overflow:scroll;'>

    <block wx:for='{{30}}' wx:key='1'>
      <view>我是模态</view>
    </block>

  </view>
</view>

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

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

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

<!-- 为了更容易看到效果，这里复制了60行 -->
<view style='width:100vw;height:100vh;overflow:scroll;'>
  <block wx:for="{{60}}" wx:key='1'>
    <view>我是内容</view>
  </block>
</view>

<!-- 下面是模态窗口 -->
<view style='position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.6);'>
  <view style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:50vh;background-color:#fff;overflow:scroll;'>
    <block wx:for='{{30}}' wx:key='1'>
      <view>我是模态</view>
    </block>
  </view>
</view>

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

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

猜你喜欢