解决van-popup导致页面无法滑动问题

已于 2023-03-08 09:51:49 修改
阅读量4.1k 收藏 4
点赞数 2
分类专栏： 笔记 文章标签： 前端
于 2022-03-17 16:51:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54009353/article/details/123554440
版权

在vue2中，van-popup组件有一个默认锁定背景滚动

但当背景内容不止一页时就很麻烦，所以这时需要给van-popup标签添加 :lock-scroll="false"

  <van-popup v-model="showPopup" :lock-scroll="false">
	<img class="popup-close"  @click="showPopup = false" src="../assets/images/X.png" />
  </van-popup>

weixin_54009353
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
zl的博客
01-07 1万+
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动 说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下滑动；这现象并不是ios和安卓兼容性问题！ 原因：设置了touch-action: none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。 2.使用PullRe...
react-native-popup-menu:React Native的弹出菜单
05-02
react-native-popup-menu·特征定位方式描述快速定位允许将菜单对齐到任何元素的边框坚持元素的中心允许按元素宽度的中心显示菜单动态定位允许将动态偏移量添加到基本菜单位置位置限制自动应用约束，以永不超越屏幕...
VantUI中van-overlay组件内部溢出内容不可滑动
Wyatto137的博客
08-15 1174
解决van-overlay内部内容无法滑动问题
vant4的组件气泡弹出框van-popover，在列表中遍历后点击一个全部/显示隐藏，解决办法
最新发布
feiyu的博客
06-27 364
vue开发，vant4组件库中的 van-popover组件，遍历后显示隐藏问题
van-popup滑动卡顿并且在有时候在ios上经常性滑动卡顿的情况
m0_60067558的博客
11-17 863
然后苹果手机卡顿情况是pop里层的设置的z-index大于了pop本身的默认z-idenx2008，设置成一样的就可以了。:lock-scroll="false"加了这个属性就可以了具体去看官网。
vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题
coldriversnow的专栏
12-21 1309
最近开发移动端h5，用的vant 移动端组件库框架，使用popup弹出层时，需要在底部固定一个操作模块。但我发现在popup组件里使用fixed定位后，如果内容没有超出popup高度，底部fixed内容显示正常，否则内容超出出现滚动条后，底部fixed定位元素随页面滚动，fixed失效。效果如下：正常情况和异常情况对比图（左正右异）：解决办法有两种方式。
vant弹出层滚动问题
ling_hun_的博客
04-12 6575
vant 弹出层popup 数据量一多就无法滚动问题 可以在弹出层popup写个滚动方法，然后使用lock-scroll=“flase”把默认弹出层组件的锁定背景滚动给打开，这样的话弹出层就能进行滚动。 不过这会导致一个问题：弹出层会滚动，弹出层底下的背景也会跟着滚动，这完完全全是多做了事，所以可以考虑在van-popup外面加一层div标签，在div标签上 加入@touchmove.prevent，禁止底层滚动，这样弹出层能滚动，背景也不会跟着滚动。 <div @touchmove.prevent&
Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题
qq_31065757的博客
05-09 2894
Vue，Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题
解决vant组件 van-dialog造成的页面闪动问题
luoxiaonuan_hi的博客
08-22 776
解决方案：该问题是因为van-dialog默认是scale，将这个属性改为fade即可。
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue ... <van v-model=popup1show position=bottom overlay=true click-overlay=clickOverlay> <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
uni-app自定义uni-popup弹窗内容
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue...
今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
08-29
今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
domv-popup:显示相对于“拥有”元素具有固定位置（弹出窗口）的 DOM 元素。 这是一个巧妙的解决方法，用于堆叠 CSS 中的上下文限制（z-index、overflow
06-18
这是一个巧妙的解决方法，用于在 CSS 中堆叠上下文限制（z-index、overflow:hidden 等） 这是一个 CommonJS 模块，你需要使用 。 用法 每个Popup实例都是一个简单的元素，具有固定的定位（ position:fixed ）。 此...
react-native-popup-menu：React Native的弹出菜单组件
01-31
特征： 易于使用的弹出/上下文菜单多种模式：动画，不动画，从底部滑动或弹出框默认情况下打开和关闭动画可选的后退按钮处理造型简单可自定义各种级别-菜单选项，位置，动画可以像受控组件一样工作，也可以不受控制...
【移动端vant 地址选择滑动不了】
前端-CV全粘工程师
12-07 726
因为vant中的弹窗组件都会有个默认参数，打开弹窗时禁止页面滚动，这个可以解决滚动穿透的问题，但是像我们这种弹窗中有地址选择的就会出现地址无法选择的bug。H5页面直接在浏览器打开是没有任何问题的，但是内嵌到小程序中就会出现，目前已出现在抖音，快手，小程序中，其他的没有试。这个bug出现得同时具备几大要素：1.内嵌H5，2，地址选择之前有使用过弹窗,设置lock-scroll为false。设置lockScroll为false。1.Overlay 遮罩层。2.Dialog 弹出框。
2021-12-11 工作记录--Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透
weixin_48850734的博客
12-11 2634
Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透
vue中使用vant组件出现软键盘顶起页面——导致事件失效
Smile_ping的博客
03-10 6804
vue中使用vant地址组件页面被顶起问题 遇到问题： IOS设备，当前发现有7Plus、iphone11【测试机有限，更新版本设备未测】 在vue页面中使用vant地址组件， 当操作到详细地址时，软键盘顶起页面往上移动。 当软键盘关闭时，页面没有还原。 操作页面点击事件时无效，【因页面移动导致位置不对】 复现效果图 输入收货人时页面展示正常 当操作详细地址时会发现，软键盘顶...
微信小程序弹窗底部不滚动-穿透
qq_46199553的博客
10-26 1403
微信小程序穿透
使用vant的Overlay 遮罩层做弹框，遇到的bug
sunbeibei00000的博客
08-13 5284
*1、*遇到的需求是，在一个弹框内某个区域设定一个最大高度，超出部分实现上下滚动， *2、*overlay遮罩层的lock-scroll属性默认设置为true 官方说明是：overlay锁定背景滚动，锁定时蒙层里的内容也将无法滚动 *3、*我是用overlay实现的弹框，然后需要滚动的区域，在 PC端调试可以用滚轮滚动，但是在真机上不能滑动 *4、*一开始我的解决办法是将lock-scroll的属性设置为false， 这样需要滚动的区域可以滚动了，但是底部背景也跟着滚动了，体验很差 *5、*最终解决办法是使
van-popup 插槽
08-16
van-popup 是 Element UI 提供的一个弹出框组件，它可以在页面中弹出一个对话框，用于展示一些信息或者进行交互操作。插槽（slot）是 Vue.js 在组件中提供的一种机制，用于在组件中插入自定义的内容。 在 van-popup 组件中，有两个常用的插槽： 1. default 插槽：用于插入弹出框的内容。你可以在该插槽中自定义需要展示的内容，例如表单、图片、文字等。 2. reference 插槽：用于指定触发弹出框的元素。默认情况下，van-popup 会根据点击事件自动触发弹出框，但你也可以通过 reference 插槽手动指定触发弹出框的元素。 例如，下面是一个使用 van-popup 组件的示例： ```html <van-popup v-model="showPopup"> <template #default> <!-- 这里是弹出框的内容 --> <div> <h3>这是一个弹出框</h3> <p>这里可以放一些内容</p> </div> </template> <template #reference> <!-- 这里是触发弹出框的元素 --> <button @click="showPopup = !showPopup">点击打开弹出框</button> </template> </van-popup> ``` 在上面的示例中，我们使用了 default 插槽来定义弹出框的内容，reference 插槽来指定触发弹出框的按钮。当点击按钮时，弹出框会显示或隐藏。 希望这个回答对你有帮助！如果还有其他问题，请继续提问。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值