WXML
将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false
WXSS
Page 设置为绝对定位,宽高各百分之百 , scroll-view 高度 百分之百
Page{
position: absolute;
width: 100%;
height: 100%;
display: block;
background: #FAFAFA;
overflow-y: hidden;
}
scroll-view{
height:100%;
}
JS
JS 控制 showModalStatus 的开关。
不过这引入了新的问题,无法触发 onReachBottom 页面上拉触底事件的处理函数
不介意的话可以使用 scroll-view 的 bindscrolltolower 进行解决 bindscrolltolower 方法触发 onReachBottom()
WXML
JS
bindscrolltolower:function(){
console.log('bindscrolltolower')
var page = getCurrentPages().pop()
console.log(page)
page.onReachBottom()
}
所以另一种方法
WXML
把底层页面使用 view 包裹起来,动态设置样式
WXSS
动态样式开启模态层时,绝对定位
.page-fix{
position: fixed;
}