如题,解决方案有两种: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
如何取舍,就看你啦~~animation