uniapp在页面有弹出层时，实现限制底部页面滚动，弹出层正常滚动效果

最新推荐文章于 2024-08-23 16:55:10 发布

xiangkou1995

最新推荐文章于 2024-08-23 16:55:10 发布

阅读量2.8k

点赞数 1

分类专栏： uniapp 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/xiangkou1995/article/details/113588971

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

uniapp在页面有弹出层时，实现限制底部页面滚动，弹出层正常滚动效果

uniapp在页面有弹出层时，实现限制底部页面滚动，弹出层正常滚动效果

废话不多说，直接上代码
在弹出层view标签添加
@touchmove.stop.prevent=“moveHandle”

在methods中添加
moveHandle: function() {
return false
},
阻止底层滚动方法

在弹出层用scroll-view标签

记得定义好滚动区域高度
打开弹窗时修改底层body样式为
{
position:fixed;
top:0;height:100%;
overflow:hidden;
}

over

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiangkou1995

关注关注

1
点赞
踩
7

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp底部弹出框效果

Xinacridine的博客

04-16

2434

<template> <view> <view class="one-right" @click="sell"> <text>卖出</text> </view> <view class="share"> <view :class="{'box': share}" @click="display"> </view> <view class="share-ite

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

iVRJay的博客

12-28

1万+

今天做页面有个需求：页面有个列表（A），内容过多时需要滚动，然后做了个弹层，里面也有个列表（B），内容过多时需要滚动由于A列表使用的web-view组件，而B列表使用view组件加overflow:hidden auto; 结果是：当弹层显示时，B列表不能滚动，底部列表A却能滚动；于是在度娘上找了找： 1、发现@touchmove.prevent貌似好牛逼，赶紧加上去，结果AB...

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

uni-app 解决自定义弹层scrollview滚动会影响页面的滚动事件

最新发布

weixin_45534301的博客

08-23

262

设置了页面高度，不会将页面的外滚动条触发出来，就可以了。

uni——背景禁止滚动（出现弹框后，背景内容禁止滚动）

努力、拼搏、奋进

04-28

559

uni——背景禁止滚动（出现弹框后，背景内容禁止滚动）

uniapp 遮罩层下内容禁止滚动

significant_的博客

02-15

1339

背景的新闻内容仍然可以滚动（逻辑上应该是遮住的内容就无法滚动了）

VUE_uni-app禁止遮罩弹窗下的页面滚动的完美解决办法

小歪博客

12-21

4321

写法一：在弹窗外层添加：@touchmove.stop.prevent="()=>false" 写法二：在弹窗外层添加： @touchmove.prevent <template> <view> <view v-for="(item,i) in 100" :key="i">list</view> <view class="Popup" @touchmove.prevent> <view class="Popup_"&gt

vue解决弹出蒙层滑动穿透问题的方法

10-17

当用户在弹出的全屏蒙层上滑动时，如果没有得到妥善处理，滑动事件会穿透蒙层，继续影响到蒙层下面的可滑动列表，导致用户体验不佳。本文通过具体的实现方法和技术细节，详细介绍了如何在Vue项目中有效解决这一问题...

禁止弹窗中蒙层底部页面跟随滚动的几种方法

01-19

但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。那么，如何阻止呢？请看以下分析：方案分析方案一打开蒙层时，给...

弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip

08-20

在iOS设备上，由于其独特的UIWebView或WKWebView的滚动行为，弹出层经常会出现遮罩层无法阻止底层页面滚动的情况。而在Android设备上，由于各种浏览器和系统版本的差异，处理方式也有所不同。这个问题不仅影响了用户...

uniapp uni-popup弹出层组件弹窗无法弹出自定义样式问题

jiey0407的博客

02-23

1185

uni-popup弹出层组件之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码：效果图： <template> <view> <view class="sign_text" @tap="toggle('center')"> <text style="line-height: 60px;margin-top: 12px;">点击弹出&lt

解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部

仰望星空的代码

07-03

2717

一、问题描述项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。滚动到第二屏，证件号输入。点击输入框可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页

uniapp——弹窗层内容可以滚动，底部页面禁止滚动

热门推荐

芋头

05-24

1万+

开发项目过程中，常常需要自己写弹出框，弹出框里可能或是列表，可能会是提示。当为列表或者需要弹出框内容滚动的时候，常常会遇到底层的内容一起跟着滚动。今天分享个解决方案，希望能够帮的上遇到此问题的小伙伴。在弹出层的遮罩view标签和内容view标签分别加上@touchmove.stop.prevent="disabledScroll" <view class="nav-bg" v-if="showTabModal" @click="onCloseMoreBg" @touchmove.stop.p

vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

JackieDYH的博客

05-26

1886

弹出层时，蒙版下还可以滚动页面移动端在蒙层所在div上加@touchmove.prevent <div class="maskBox" @touchmove.prevent></div> PC端弹层显示时调用 stopMove()停止页面滚动，弹层消失时调用 Move()开启页面滚动 //停止页面滚动 stopMove(){ let m = function(e){e.preventDefault();}; document.body.s...

uni-app弹窗列表滚动, 蒙层下面也跟随滚动解决方案

qq_36576931的博客

10-28

1万+

开发项目时，滑动弹窗里的列表，蒙版下面的内容也会跟着滑动，导致弹窗中的列表不能正常滚动，经过多次百度和多次尝试，终于解决了这个问题，以下代码希望对你有帮助。 1.弹窗组件代码，需要在最外层的view中加入@touchmove.stop.prevent="moveHandle"，且弹窗中需要滚动的列表要使用scroll-view标签包裹起来，且scroll-y 属性不能忘记加。如对您有...

uniapp H5的弹窗滚动穿透解决(uni-data-picker组件的滚动穿透)

peachban的博客

11-09

2470

滚动穿透即：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动。默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

web端下和uniapp下滑动穿透的解决方案，弹窗滑动导致底部滑动问题解决

weixin_44120503的博客

07-28

1693

web端和uniapp滑动穿透解决方案

【uniapp】禁止遮罩层下的页面滚动解决办法

Brod-Roy的博客

02-27

9529

不少朋友在日常工作中都会遇到需要自定义弹窗的时候，当开启弹窗后，却发现存在弹窗下的页面依旧可以被触发滚动的问题，以下是相关的解决方法。

uniapp小程序禁止遮罩弹窗下页面滚动的办法

努力、拼搏、奋进

03-30

548

uniapp小程序禁止遮罩弹窗下页面滚动的办法

uniapp禁止页面滑动的方法：

nelly521的博客

10-17

1712

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

uniapp底部弹出层

09-09

uniapp底部弹出层可以通过使用`uni.showActionSheet`方法来实现。在代码中，使用`button`组件并在`@click`事件里调用`showActionSheet`方法来打开弹窗。...这样就可以实现uniapp的底部弹出层效果。