小程序vant popup弹出层阻止底层页面滑动

最新推荐文章于 2024-01-12 22:51:33 发布

原创

最新推荐文章于 2024-01-12 22:51:33 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍在使用VantWeapp的Popup组件时，如何防止底层页面随触屏滑动的问题。通过在Popup组件中添加@touchmove.stop.prevent属性，并指向空事件处理函数，可以有效阻止滑动事件传递到底层页面。

前言

在小程序编写过程中使用使用vant weapp的popup组件做小程序的弹出层，触屏导致底层页面跟着滑动。

解决方法

使用touch事件阻止属性，@touchmove.stop.prevent指向空事件

van-popup(
	:show="popupShow"
	:z-index="999"
	position="bottom"
	@close="popupClose"
	@touchmove.stop.prevent=<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

张清悠

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

nuxt+vant用来van-popup移动端滚动失效

weixin_45148145的博客

03-09

801

问题描述：移动端官网跳转路由后的页面，页面无法滚动

今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡

08-29

今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡

2 条评论您还未登录，请先登录后发表或查看评论

微信小程序 - vant popup弹出层阻止底层页面滑动

最新发布

Iphone886的博客

01-12

1290

如题，微信小程序使用vant时，经常遇到dialog，popup等弹窗。禁止页面上下滑动，这个时候，只需一句代码，轻松搞定。上面这句放WXML。在开启弹窗的时，值给lockScroll:false即可。

popup 弹窗出现，禁止页面滚动条

weixin_52492583的博客

12-28

1467

弹窗出现，禁止页面滚动条，但是弹窗滚动条依旧可以使用。

小程序显示弹窗时禁止下层的内容滚动

岁末zzz的博客

06-25

839

用 catchtouchmove=“return” //此处为弹窗内容 <view catchtouchmove="return"> //外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部. <view catchtouchmove="return"></view> //在每个小的区域内加 catchtouchmove=...

微信小程序弹窗底部不滚动-穿透

qq_46199553的博客

10-26

1546

微信小程序穿透

在vant中使用时间选择器和popup弹出层的操作

01-21

我就废话不多说了，大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h

解决VantUI popup 弹窗不弹出或无蒙层的问题

01-18

把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van v-model=popup1show position=bottom overlay=true click-overlay=clickOverlay> <van-datetime-picker show-toolbar :title=...

微信小程序vant弹窗组件的实现方式

11-20

作为从事前端开发的你肯定见过不少的弹框组件，你可曾有想过要自己实现一个弹框组件库，又或者想完全定制化的使用各种标准UI框架中的弹框组件呢？...vant-weapp中弹框主要分为**两大类：弹出层Popup

微信小程序弹出层，右上角关闭按钮

07-14

在微信小程序开发中，弹出层（Popup）是一种常见的用户交互元素，用于提供临时性的信息展示、用户操作或对话框。微信小程序的弹出层设计通常包括一个可点击的按钮来触发弹出，以及在弹出层右上角设置一个关闭按钮，...

小程序弹框底层禁止滚动设置

熊宗的博客

01-07

781

<van-popup show="{{ showPopup }}" close-on-click-overlay="false" position="bottom" bind:close="moreSettingClick" catchtouchmove="return"> <view class='center_popup'> <view class='head-box'> <view class=.

小程序 弹窗时禁止下层页面滚动

豆。的博客

06-02

1072

出现的问题：弹窗出现后，滑动弹出的视图或者遮罩层，发现根页面page也跟着滑动。解决方法：设置弹窗最上层view的属性catchtouchmove=“方法名”，这里的方法完全是为了消除控制台的警告，也可不做处理。示例： <view catchtouchmove="noneEnoughPeople"></view > // 空函数即可 noneEnoughPeople(){}, ...

vue阻止页面滚动

qq_37493515的博客

05-21

723

公司h5同一个页面要做三个带灰色背景弹窗，用的是vant组件，组件里面有自带的遮罩层。但是 <div class="magnify" v-show="isShow" @click.self="hide()" @touchmove.prevent @mousewheel.prevent></div> 首先，这个div就是整个遮罩组件的根组件，核心就是div上的事件绑定。 @touchmove 是触摸移动事件 @mousewheel 是鼠标滚轮事件 ...

移动端vant-popup导致背景内容跟随弹窗滑动问题

weixin_44667590的博客

03-22

1031

解决vanpop组件出滚动条后导致背景内容跟随滑动问题。

vant弹出层滚动问题

ling_hun_的博客

04-12

7835

vant 弹出层popup 数据量一多就无法滚动问题可以在弹出层popup写个滚动方法，然后使用lock-scroll=“flase”把默认弹出层组件的锁定背景滚动给打开，这样的话弹出层就能进行滚动。不过这会导致一个问题：弹出层会滚动，弹出层底下的背景也会跟着滚动，这完完全全是多做了事，所以可以考虑在van-popup外面加一层div标签，在div标签上加入@touchmove.prevent，禁止底层滚动，这样弹出层能滚动，背景也不会跟着滚动。 <div @touchmove.prevent&

关于弹出蒙层禁止背景可滑动的实现方法

weixin_30670965的博客

01-09

398

我们在业务处理中，时常遇到这样的情况：在当前页弹出一个蒙层，在蒙层上仍然可滑动底部背景，解决这个最通用的方法是，通过条件判断，给底部背景动态添加或去除一个css类hidden .hidden {width: 100vh; overflow: hidden} 在vue里有个便捷的方式： <view class="mask" @touchmove.prevent /> 转载于:h...

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

weixin_54009353的博客

03-17

5339

在vue2中，van-popup组件有一个默认锁定背景滚动但当背景内容不止一页时就很麻烦，所以这时需要给van-popup标签添加 :lock-srcoll="false" <van-popup v-model="showPopup" :lock-scroll="false"> <img class="popup-close" @click="showPopup = false" src="../assets/images/X.png" /> </van

vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题

coldriversnow的专栏

12-21

2051

最近开发移动端h5，用的vant 移动端组件库框架，使用popup弹出层时，需要在底部固定一个操作模块。但我发现在popup组件里使用fixed定位后，如果内容没有超出popup高度，底部fixed内容显示正常，否则内容超出出现滚动条后，底部fixed定位元素随页面滚动，fixed失效。效果如下：正常情况和异常情况对比图（左正右异）：解决办法有两种方式。

vant-popup弹出层用法

10-20

Vant是一个基于Vue.js的移动端组件库，其中包含了Popup弹出层组件。使用Vant的Popup弹出层组件可以方便地实现弹出层的功能，具体用法如下： 1. 引入Vant组件库和样式文件。 2. 在需要使用弹出层的地方添加Popup组件，并设置相应的属性，如position、show、close-on-click-overlay等。 3. 在Popup组件中添加需要显示的内容。 4. 在Vue实例中添加相应的方法，用于控制弹出层的显示和隐藏。下面是一个简单的例子： ``` <template> <div> <van-button @click="showPopup">显示弹出层</van-button> <van-popup v-model="show" position="center" :close-on-click-overlay="false"> <div>这是弹出层的内容</div> <van-button @click="hidePopup">关闭弹出层</van-button> </van-popup> </div> </template> <script> import { VanPopup, VanButton } from 'vant'; export default { components: { VanPopup, VanButton, }, data() { return { show: false, }; }, methods: { showPopup() { this.show = true; }, hidePopup() { this.show = false; }, }, }; </script> ```