公司有需求做一个广告弹窗,但是小程序现有的弹窗样式太固定,无法满足需求,于是就手动写了个弹窗。之后发现自己写的小程序弹窗出现以下问题:
页面可以滚动。也就是说弹窗只遮住了100vh(视窗高度),然后页面滑动之后,下面的部分页面没被遮住。
这样是万万不能行的⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
需求是:在打开弹窗的时候,让页面不可滚动;关闭弹窗后,恢复页面滚动。实现如下:
1.整个背景页面布局用<scroll-view>
作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{ {!modalVisible}}" class="container">
,其中modalVisible 是弹窗的hidden值。 2.样式文件中设置scroll-view.container的overflow-y属性值为hidden。 3.样式文件中设置scroll-view.container的height属性值为100vh。 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true即可。 其中modal部分代码如下:
复制代码
.