WeChat------小程序弹窗开启时禁止底部页面滚动

最新推荐文章于 2024-04-19 10:17:03 发布

绝世唐门三哥

最新推荐文章于 2024-04-19 10:17:03 发布

阅读量704

点赞数

分类专栏：知识点总结微信小程序小程序文章标签： wechat 小程序弹窗

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/119417022

版权

知识点总结同时被 3 个专栏收录

257 篇文章 4 订阅

订阅专栏

微信小程序

17 篇文章 0 订阅

订阅专栏

小程序

15 篇文章 2 订阅

订阅专栏

在开发微信小程序时遇到一个问题：当表单页面和自定义弹窗都过长，导致两者同时滚动。为了解决这个问题，采取了以下策略：在打开弹窗时，通过设置页面和scroll-view的滚动属性，使得页面不可滚动；关闭弹窗时恢复页面滚动。具体实现包括使用<scroll-view>动态绑定scroll-y属性，设置Page的overflow-y为hidden，以及在事件中切换isScroll的值来控制滚动。

摘要由CSDN通过智能技术生成

最近在做微信小程序的开发，涉及到自定义弹窗，然而当我的表单页面过长，同时自定义弹窗也过长，即两者都需要滚动的时候，问题出现了:

问题:当我滚动弹出窗页面时,会导致后面的页面也出现滚动的表现:

解决思路:在打开弹窗的时候，让页面不可滚动；关闭弹窗后，恢复页面滚动

1.整个布局用<scroll-view>作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{isScroll}}">

2.样式文件中设置Page的overflow-y属性值为hidden

3.样式文件中设置scroll-view的height属性值为100%

4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true