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


    如题,解决方案有两种:

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

    <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>
    

    2、如果弹出层有滚动事件,有两种方法:

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

    <view class="{{showMask?'not-scroll':''}}">
    
    .not-scroll{
    
            top:0px;
    
            left: 0px;
    
             100%;
    
            height: 100%;
    
            overflow: hidden;
    
            position: fixed;
    
            z-index: 0;
    
    }
    

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

    方法二
    给底部的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>标签,又存在以下问题:

    • 在 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 ,这样也能通过点击顶部状态栏回到页面顶部

    如何取舍,就看你啦~~

  • 相关阅读:
    使用360安全卫士在线对本机电脑进行重装系统
    分享个人电脑上的文件
    Docker初探之运行RabbitMQ消息队列服务
    Docker初探之运行MySQL
    Docker初探之常用命令实践
    Docker初探之Windows篇
    SignalR入门之多平台SignalR服务端
    SignalR入门之从外部访问持久性连接或Hub
    SignalR入门之Hub
    SignalR入门之小试身手
  • 原文地址:https://www.cnblogs.com/fayin/p/8461847.html
Copyright © 2020-2023  润新知