uniapp 自定义弹层时，底部页面滚动而弹层不能滚动

2024-05-12 05:32:37

今天做页面有个需求：

页面有个列表（A），内容过多时需要滚动，

然后做了个弹层，里面也有个列表（B），内容过多时需要滚动

由于A列表使用的web-view组件，而B列表使用view组件加overflow:hidden auto;

结果是：当弹层显示时，B列表不能滚动，底部列表A却能滚动；

于是在度娘上找了找：

1、发现@touchmove.prevent貌似好牛逼，赶紧加上去，结果AB都GG了；

@touchmove.prevent

2、当显示弹层时，给body添加样式

body{position:fixed;top:0;height:100%;overflow:hidden;
}

ctrl+s ------------------------>>>当场GG，body样式一沉不变

正当我一筹莫展的时候，突然灵机一动，把B列表也改成了scroll-view组件

<scroll-view class="B" scroll-y>······
</scroll-view>

ctrl+s ------------------------>>>当场--------->>>非常OK

A列表正常滚动，弹层出现后，弹层里面内容可以滚动了，且底部A列表已经不可以滚动了，当弹层消失，A列表有可以正常滚动；

到这里，我的问题已经解决了，原谅我本来两个scroll-view组件就能搞定的事却折腾了这么久，不过谁让咱是程序猿呢，就是得抗造不是？

那么问题来了，难道view就不能做了吗？

一想到这里，我又感紧去试了下

结果是： AB两个都是view组件加overflow:auto;是可以的，不过当弹层B列表滚动到顶部或者底部时，继续滚动会带动A列表滚动，体验不是很好；当然这个可以自己折腾优化下，但我这人懒，既然有现成的方案就直接用了。

而view和scroll-view的组合，你自己去用用就知道了。

uniapp 自定义弹层时，底部页面滚动而弹层不能滚动相关推荐

微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动
前言底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
vue弹层时禁止页面滚动
创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...
软键盘弹出时popwindow_【示例】解决软键盘弹出时底部元素上浮的问题
问题描述在html5plus环境下,当html中存在固定在底部的元素时,此时弹出软键盘的话,底部的元素也会被弹上来. 出现这种情况时,看起来页面布局好像乱掉了,这样给用户的体验不太理想. 问题分析 ...
java弹框刷新原页面_JavaScript:关闭弹出窗口时刷新父窗口
说明: 关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息,即用户通过window对象的open()方法打开一个新窗口(子窗口),当用户在该子窗口中进行了数据库操作(如数据添加.修 ...
uniapp uni-file-picker 组件删除时增加二次确认弹框
全文放在下面,先写一下思路 1.思路首先看了一下api文档,只有删除的事件,然后发现抛出的删除事件是已经删除了图片之后的事件,然后去源码里看在哪里抛出的删除发现是在点击按钮的事件里做的删除,所以我 ...
禁止蒙层底部页面跟随滚动
场景概述弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...
禁止蒙层底部页面跟随滚动 1
场景概述弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...
蒙层禁止下方页面滚动防抖动完美方案
文章目录学习链接前言蒙层禁止页面滚动的方案实现 body hidden touch preventDefault body fixed 解决js 禁止滚动条滚动,并且滚动条不消失,页面大小不闪 ...
android 页面默认不弹软键盘_Android 软键盘的全面解析，让你不再怕控件被遮盖！...
作者 | Vander丶编辑 | 苏宓微信公众号 | mobilehub 背景 Android软键盘这块从我入职到现在,是一个一直纠缠我的问题. 从布局挤压,到EditText显示不全,在到弹出时 ...
uniapp自定义导航栏，手机顶部通知栏字体颜色修改
使用uniapp自定义导航栏时,自己的导航栏字体颜色为白色但是,系统上方的通知栏部分还是黑色,文档中表明设置这个就有用,即使你的配置是"navigationStyle": &qu ...

最新文章

热门文章