vue项目中的model层禁止后面页面滑动

最新推荐文章于 2023-10-17 08:39:58 发布

xiaojun_xie

最新推荐文章于 2023-10-17 08:39:58 发布

阅读量408

点赞数 1

分类专栏： vue项目

本文链接：https://blog.csdn.net/xiaojun_xie/article/details/104537443

版权

vue项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在model弹出层的最外面标签写下@touchmove.prevent 就可以禁止后面的内容滑动

 <-- 阴影背景层 -->
<div class= 'model' @touchmove.prevent></div>

碰到问题记录一下，如有其它解决方式，望指教

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaojun_xie

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue写模态框，同时禁止页面滚动

Study_Live_Sun的博客

03-17

766

父组件 <template> <div class="text-center"> <div v-for=" i in 100" :key="i">{{i}}</div> <Modal v-show="showModal" v-on:closeme="closeme"></Modal> </div> </template> <script> import Modal fro

modal 弹出层后禁止底层滚动

热门推荐

A.Wang的专栏

05-10

1万+

看到一篇不错的介绍由弹出层引发对滚动原理的讨论亲自实验的时候各种坑，都知道在web上处理很简单：html, body{ overflow: hidden; }1.这样只能解决web上的问题，移动端不管用 2.这样处理仍然会有一些页面宽度适配问题因为我用在微信公众号开发上（移动端），所以找移动端解决方案，大部分回答是在弹出层弹出的时候禁用掉触摸事件，弹出层消失的时候再把事件加上：// 记

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

H5弹窗弹出后，页面可滚动，希望禁止滚动

lovecoding1的博客

11-30

1967

H5弹窗弹出后，页面可滚动，希望禁止滚动

微信里 model弹出之后如何阻止body滚动

baidu_39418435的博客

04-18

682

项目是用到了react+react-tap-event-plugin，弹窗用到了meterial-ui的组件PS：react-tap-event-plugin主要就是解决手机端点击300ms延迟的问题，用onTouchTap代替onClick，还很好的解决了点透的问题。遇到的问题就是model弹窗弹出后，背后的body部分还可以滚动，搜了很多，有要model弹出之后给body添加overflow:...

uni-app踩坑 - 模态框modal禁止滑动、禁止点击

PrisonersDilemma的博客

09-30

3750

话不多说，贴代码： <view class="my-modal" @touchmove.stop.prevent="preventHandler"> <view>...</view> </view> export default { methods: { preventHandler() { return } } } ...

vue-cli的蒙层组件内部滑动时禁止主页面的滑动

weixin_41866622的博客

03-08

317

需求：显示带蒙层组件时，组件内容滑动的同时禁止主页面思路：分别在组件加载和销毁时禁用和恢复窗口的touchmove事件 mounted() { // 加载组件时禁止主页面的滑动 let m = function(e) { e.preventDefault(); }; document.body.style.overflow = "hidden";...

vue开发拖拽进度条滑动组件

10-16

在 Vue 中开发拖拽进度条滑动组件，可以帮助我们创建交互式的用户界面，让用户能够通过拖动滑块改变进度或选择值。下面将详细介绍如何使用 Vue 开发这样的组件。首先，我们要创建一个名为 `Slider` 的组件。这个...

vue-sliding-pagination:一个滑动分页vue组件

08-04

[待办事项：] [插入] [crapton] [徽章] [此处] [因为] [javascript] ... 在以后的版本中，可能会提供对currentPage的 v-model 方法，但暂时不选择。因此，要获得具有默认设置的分页器（有关详细信息，请参阅下面

vue项目中自定义video视频控制条的实现代码

10-15

在Vue项目中，自定义video视频控制条是一个常见的需求，以提供更加个性化和美观的用户体验。下面我们将详细探讨如何实现这一功能。首先，我们需要在HTML结构中包含`<video>`标签，以及用于显示自定义控制条的元素...

用vue 实现手机触屏滑动功能

10-15

在Vue中，我们可以使用模板语法和组件系统来简化页面结构和交互逻辑。在实现触屏滑动功能时，我们通常会使用内置的事件监听器以及计算和状态管理来追踪用户的触摸行为。在这个例子中，我们看到一个`<Carousel>`...

bootstrap里模态框调用后禁止页面滚动

qq_42345237的博客

01-06

1152

首先我们需要判断模态框是否已经被调用，这里使用bootstrap里提供的方法： // 监听点击事件，来触发页面是否滚动 // 定义两个函数，来禁止滚动和释放页面滚动 $('.modal').on('show.bs.modal', function(e) { stopScroll(); }) $('.modal').on('hidden.bs.modal', function(e) { ...

vue滚动条禁止_vue弹窗屏蔽滑动的两种解决方案

weixin_39985279的博客

12-20

1134

序在开发过程中，我们经常会遇到要加弹窗的需求，而如果当前页的展示数据一屏展示不完，则在打开弹窗后，有滑动操作时，页面也会随之滑动。那么如何处理这一问题呢？常见问题我们开发过程中，最常见的问题上文已叙述：打开弹窗后，有滑动操作时，页面也会随之滑动。问题示意图如下：背景无法屏蔽弹窗.gif最终效果我们来看一波正确示范可滑动弹窗.gif解决方案两种解决方案，针对两种不同情况：弹框数据少，无需滑动弹框内数...

阻止滚动穿透：弹窗显示时，让背景页面禁止滚动

cindy647的博客

04-13

3319

问题描述在显示弹窗时，如果底部页面可滚动，可能在弹窗显示时，滚动鼠标，会发生滚动穿透，让底部页面也一起滚动了。这种用户体验是不太好的，怎么能阻止滚动穿透呢？解决思路让弹窗显示时，阻止背景的滚动事件，弹窗关闭时，重新恢复背景的滚动示例（vue） <div> 原背景页面 </div> // 假设如下是一个简略的弹窗元素 <div v-if="showDialog"...

uniapp禁止页面滑动的方法：

最新发布

nelly521的博客

10-17

1717

{ "path": "pages/client/product/product_equity", "style": { "navigationBarTitleText": "产品介绍", "navigationStyle":"custom" , "transparentTitle": "always", "titlePenetrate": "YES", "enablePullDownRefresh": false,//禁止下滑刷屏 "navigationBa

uniapp u-modal模态框中使用scroll-view，滑动到底部父页面滑动

qq_42905523的博客

04-28

4791

场景：用uniapp写h5页面嵌入app中，点击弹出弹框，弹框中展示内容可滑动。弹框使用uview组件库中的u-modal，可滑动区域使用scroll-view。遇到的问题是：在安卓机上，scroll-view滑动到最底部时会触发主页面滑动，使用@touchmove.stop.prevent未起作用。最终使用的解决方法是：弹出弹框时赋给主页面scrollLock类，使主页面固定住即不可滑动，关闭弹框时移除scrollLock类，通过isStopBodyScroll控制类的有无 <templat.

【uniapp滚动穿透】在u-modal中使用scroll-view底下主页面会跟随滚动

qq_33310436的博客

10-13

2506

uniapp 模态窗中使用scroll-view 滚动穿透

vue移动端弹框出现禁止页面滑动，关闭弹框可以正常滑动

weixin_44217525的博客

05-28

1119

根据网上的方法 // 关闭弹框 close(){ // 关闭弹框页面可以滑动 var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false) }, // 弹框弹出 showModel(){ // 弹框出现页面禁止滑动

vue 弹出层弹出后禁止底层body滚动

weixin_44204546的博客

09-05

1143

vue 弹出层弹出后禁止底层body滚动新建utils/modalHelper.js文件 // 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用 let _scrollTop class ModalHelper { // popup 显示时调用 static afterOpen () { _scrollTop = document.scrollingElement.scrollTop ...

解决手机上层滑动，导致底层body滑动（touchmove的阻止）

--承诺同乐--的博客

11-09

4896

原文链接：https://www.haorooms.com/post/webapp_bodyslidebcdiv 下图是截取了项目部分图片~左边白色区域是从左侧滑出的菜单栏，右边灰色区域是遮罩层；当左边用户中心白色区域菜单过多，或者是手机屏幕过小出现滚动条的时候，在其表层滑动时，底层部分body也会跟着滑动~ 解决方法： 1、该区域没有滚动条：最直接的办法，禁止表层滑动，如...

vue中输入框鼠标滑动数字增加减少怎么实现

05-15

在Vue中，实现输入框鼠标滑动数字增加减少可以通过以下两个步骤实现：第一步：为输入框绑定一个鼠标滚轮事件。这个事件可以使用v-on指令来绑定，例如： ```html <input v-model="number" v-on:wheel="onWheel"> `...