如題,解決方案有兩種: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