博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决微信小程序自定义弹窗时,背景页面可滚动
阅读量:7132 次
发布时间:2019-06-28

本文共 554 字,大约阅读时间需要 1 分钟。

公司有需求做一个广告弹窗,但是小程序现有的弹窗样式太固定,无法满足需求,于是就手动写了个弹窗。之后发现自己写的小程序弹窗出现以下问题:

页面可以滚动。也就是说弹窗只遮住了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部分代码如下:

复制代码

.

转载地址:http://vbyrl.baihongyu.com/

你可能感兴趣的文章
ubuntu 14.04 LTS 右键菜单解压压缩包时出错
查看>>
Mysql 查询缓存
查看>>
ubuntu搭建mediawiki
查看>>
uoj#274. 【清华集训2016】温暖会指引我们前行(LCT)
查看>>
[51nod1222] 最小公倍数计数(莫比乌斯反演)
查看>>
LeetCode - 37. Sudoku Solver
查看>>
公钥,私钥和数字签名这样最好理解
查看>>
SqlBulkCopy 类
查看>>
csu1811(树上启发式合并)
查看>>
spring 整合maven 定时任务调度,多个任务写法
查看>>
New Concept English Two 15 37
查看>>
L125
查看>>
poj2192
查看>>
json的内容回顾
查看>>
SAP将内表生成XML作为excel保存到FTP
查看>>
栅格系统
查看>>
[Selenium] 使用自定义的FirefoxProfile
查看>>
Spine批量导出Command line Export
查看>>
POJ3690:Constellations——题解
查看>>
第二次毕业设计任务书
查看>>