[bug]小程序弹出层滚动穿透问题修复

如题,解决方案有两种:canvas

一、若是弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷)xss

<template name="popup-modal">
  <view class="modal-overlay" catchtouchmove />
  <view class="popup" catchtouchmove>
    <view class="popup-title">title</view>
    <view class="popup-content">content</view>
  </view>
</template>

二、若是弹出层有滚动事件,有两种方法:ide

方法一
在弹出层出现的时候给底部的containerView加上一个class,消失的时候移除。code

<view class="{{showMask?'not-scroll':''}}">

.not-scroll{

        top:0px;

        left: 0px;

        width: 100%;

        height: 100%;

        overflow: hidden;

        position: fixed;

        z-index: 0;

}

这种方法简单有效,但会改变页面本来滚动的位置(会滚动到顶部)。xml

方法二
给底部的containerView用<scroll-view>包裹起来,动态设置scroll-y,注意须要添加额外的样式:事件

//somefile.wxss
.page,
page {
  height: 100%;
  overflow: hidden;
}
scroll-view {
  height: 100%;
}

// somefile.wxml
<scroll-view
            scroll-y="{{!showMask}}"
            scroll-with-animation 
            enable-back-to-top="{{!showMask}}">

</scroll-view>

这个方法解决了方案一带来的问题,但由于使用了<scroll-view>标签,又存在如下问题:ip

  • 在 scroll-view 内有fixed定位的隐藏内容,会闪现一下,而后再隐藏的诡异bug。解决办法是将其移动到 scroll-view 外面
  • tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  • tip: scroll-into-view 的优先级高于 scroll-top
  • tip: 在滚动 scroll-view 时会阻止页面回弹,因此在 scroll-view 中滚动,是没法触发 onPullDownRefresh
  • tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能经过点击顶部状态栏回到页面顶部

如何取舍,就看你啦~~animation

相关文章
相关标签/搜索