小程序中 使用fixed自定义弹窗时，底部长页面禁止滚动

最新推荐文章于 2024-05-25 21:30:40 发布
原创 最新推荐文章于 2024-05-25 21:30:40 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了原生小程序与mpvue框架中如何处理弹层上的触控事件，通过catchtouchmove和@touchmove.stop实现事件阻止冒泡的技术细节。

原生小程序中可以在弹层上使用catchtouchmove，此事件会阻止向父元素冒泡，mpvue中使用@touchmove.stop="()=>{}"。

微信小程序｜自定义弹窗组件
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
08-17 1万+
深入探讨如何创建自定义弹出组件，穿插案例研究和实际应用，在实际开发中更好地利用自定义弹出组件来提升用户体验。
fixed弹出层滚动区域滑动时阻止window窗体的滚动事件
weixin_30295091的博客
06-04 265
web浏览器中，当我们出现一个浮层，浮层里面也有滚动条的时候，且有部分背景半透明的时候，就会发现，当我们滚动浮层里面的小滚动条的时候，背后整个页面都跟着一起滚走了。 方案1：监听浮层的touchstart,touchmove事件, 计算浮层滚动区域的最大滚动区域，在touchmove事件中判断规则，根据情况阻止默认事件(popup_box_scroll为浮层滚动区域的id) ...
【笔记】fixed定位的弹层，阻止弹层后面的内容继续滚动
hamal_ye的博客
01-07 1882
有时候显示一些提示的弹窗或者活动规则的弹层时，不希望继续滑动的时候，弹层后面的内容还能继续滚动 此时可以通过点击的监听事件来阻止，这里给的例子是用jq写的 $(".dialog").on("touchstart",function(e){e.preventDefault();}) 缺点：在这个盒子里面的其他点击事件或者sroll属性会失效 ...
fixed弹窗禁止底部页面滑动
eazdp
05-08 1726
1.根据网上大多数的写法当弹窗出现的时候给body和html设置{overflow:hidden;}，然后当关闭弹窗的时候{overflow：auto；}，出现了一个问题，当弹窗关闭的时候在6sp上面页面滑动一顿一顿的 2.所以采用iscroll.js做底部页面滑动处理，外层的div设置position：absoule；这样就解决了底部页面滑动的问题
小程序有fixed定位模态框实现禁止页面跟随滚动
LeeNingfeng的博客
06-23 1167
在模态框上加上catchtouchmove='true'
禁止页面滚动的几种方法
文摘资讯
05-25 2653
overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的 标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden; }当弹出浮层...
微信小程序自定义弹窗实现详解(可通用）
10-16
在微信小程序开发中，自定义弹窗是一种常见的需求，它能提供更加个性化的用户体验和功能。本文将深入探讨如何在微信小程序中实现一个通用的自定义弹窗，并给出详细的代码示例。 首先，自定义弹窗的核心在于创建一个...
【小程序开发】—— 封装自定义弹窗组件
热门推荐
qq_49002903的博客
10-30 4万+
小程序项目实战——封装自定义弹窗组件，确定不来看看吗？
精选资源
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
小程序显示弹窗时禁止下层的内容滚动实现方法
10-17
在开发微信小程序的过程中，有时我们需要实现一个功能：当弹窗显示时，禁止下层内容的滚动，以确保用户的注意力集中在弹窗上。本篇将详细介绍两种实现这一功能的方法。 ### 方法一：利用`position: fixed` #### 1....
uni-app开发微信小程序,禁止弹窗下方页面滑动类似于遮罩；禁止弹窗页面内容滑动
weixin_45395283的博客
09-05 2173
uni-app开发微信小程序,禁止弹窗下方页面滑动类似于遮罩；禁止弹窗页面内容滑动
css h5 端弹窗时禁止底部页面滚动
且听风吟的博客
08-11 8637
css h5 端弹窗时禁止底部页面滚动
h5中弹框出现后禁止页面滚动
小小•愿望的博客
10-24 3597
在写带有遮罩层的弹窗时，弹窗出现时，弹框后面的页面依然会保持滚动状态，其实这种情况并么什么影响，但是有很多时候想禁止滚动。无论在移动端还是PC端都会遇到这种情况。在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动。
position:fixed固定后禁止底层元素上下滑动
weixin_42220130的博客
02-19 2600
用一个view把代码包起来， 当模态层出来时给它添加height:100%;position: absolute;overflow: hidden; 模态框消失时去掉样式 <view class="box" :class={"fixedHeight:xxx===xxx"}> <view>内容<view> <view>弹窗<view> </view> <style> .fixedHeight { height:100%;
【CSS-04】移动端蒙层底部页面禁止滑动
always_littlesun的专栏
05-03 2万+
本篇主要讲如何在页面上加蒙层。蒙层居中，且底部页面不能再滑动。 蒙层 效果： 关键字：z-index, rgba 实现： body分为两个大的div区域，一个是底部展示的div(div-back),一个是弹出的蒙层div(div-pop)。在弹出的蒙层区域，中间部分是container区域，里面有头部的背景图片和content内容，其中包括[知道了]尾部按钮。 对于div-pop，背景色设置为5
解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）
我的博客
11-08 1万+
一些细节处理 在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下： 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时
position:fixed;实现底层页面不跟随浮层模块滚动
liudan123012的博客
04-15 1万+
由于工作需要，在首页做一个搜索浮层，要求浮层全屏显示（即：width:100%;height:100%;）。当页面内容超出屏幕高度时，页面添加滚动条（overflow:scroll;）。                  搜索页面（浮层）代码：         可是问题是，当我们滑动到浮层底部或顶部时，底层页面（首页）也会跟着滑动，那么就会出现底层页面的滚动条。
css 解决fixed 布局下不能滚动的问题
weixin_30556161的博客
08-14 5263
如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置： 1 2 div { 3 4 display:fixed; 5 6 height:100%; 7 8 overflow:scroll; 9 10 } 但是这样并不会出现滚动条，正确的做法应该设置top和bottom为...
uniapp小程序写一个自定义弹窗组件覆盖底部导航
最新发布
03-13
<think>好的，用户让我介绍一下如何在Uniapp小程序中写一个自定义弹窗组件覆盖底部导航。首先，我需要回忆一下Uniapp的结构和小程序的限制。底部导航通常使用uni-tabbar组件，默认层级可能较低，所以弹窗要覆盖它的话，必须确保弹窗的z-index足够高。 用户的需求是自定义弹窗覆盖底部导航，这意味着弹窗组件需要全屏或者定位在底部，并且层级高于tabbar。可能需要检查小程序的API，看看是否允许动态隐藏tabbar，不过通常不建议这样做，因为可能违反平台规范，影响审核。 接下来，我需要考虑组件的结构。弹窗组件可能需要使用fixed定位，覆盖整个屏幕，并且设置z-index为较高的值，比如999。同时，背景遮罩层需要半透明，点击遮罩层可以关闭弹窗，但要注意事件冒泡的问题。 然后，实现步骤可能包括创建组件、处理遮罩层点击事件、控制弹窗显示隐藏的状态，以及处理滚动穿透的问题。滚动穿透是指当弹窗出现时，底层页面仍然可以滚动，这需要通过在弹窗显示时动态设置页面的overflow为hidden来防止。 另外，用户可能希望弹窗从底部弹出，带有动画效果。这可以通过CSS过渡或动画来实现，比如transform的translateY属性，结合transition，让弹窗平滑地出现和消失。 还需要考虑组件的可复用性，比如通过props接收标题、内容、确认按钮文字等，让组件更灵活。同时，事件处理方面，需要emit事件，让父组件可以处理确认和取消的动作。 最后，可能需要提到注意事项，比如在微信小程序中，原生组件如video、map的层级最高，无法被覆盖，但自定义弹窗一般不会有这个问题，只要z-index设置正确。另外，动态修改tabbar的显示可能会被平台审核拒绝，所以最好用纯CSS层级覆盖的方式来实现。 总结一下，回答应该包括组件结构、样式设置、动画实现、事件处理、使用示例以及注意事项，确保用户能够按照步骤实现需求，同时避免常见的坑。</think>--- ### 自定义弹窗覆盖底部导航实现方案 #### 核心原理 通过`z-index`层级控制 + `position: fixed`定位实现覆盖效果，需确保弹窗层级高于底部导航（微信小程序默认tabbar层级为999） --- ### 完整组件代码 ```html <!-- components/custom-modal.vue --> <template> <!-- 遮罩层 --> <view v-if="visible" class="modal-mask" :style="{zIndex: maskZIndex}" @tap="handleMaskClick" @touchmove.stop.prevent="()=>{}" > <!-- 弹窗主体 --> <view class="modal-content" :class="[position, { 'show': isAnimated }]" :style="{zIndex: contentZIndex}" @tap.stop="()=>{}" > <slot name="header"> <view class="modal-header">{{ title }}</view> </slot> <scroll-view scroll-y class="modal-body" :style="{maxHeight: bodyHeight}" > <slot></slot> </scroll-view> <view class="modal-footer"> <button v-if="showCancel" class="btn-cancel" @tap="handleCancel" >{{ cancelText }}</button> <button class="btn-confirm" @tap="handleConfirm" >{{ confirmText }}</button> </view> </view> </view> </template> <script> export default { props: { visible: Boolean, title: String, position: { // 弹窗位置 type: String, default: 'bottom' // 支持 top/center/bottom }, maskClosable: { // 点击遮罩关闭 type: Boolean, default: true }, bodyHeight: { // 内容区最大高度 type: String, default: '60vh' }, confirmText: { type: String, default: '确认' }, cancelText: { type: String, default: '取消' }, showCancel: { type: Boolean, default: true } }, data() { return { maskZIndex: 9998, contentZIndex: 9999, isAnimated: false } }, watch: { visible(val) { if(val) { // 处理iOS滚动穿透 document.body.style.overflow = 'hidden'; setTimeout(() => { this.isAnimated = true; }, 50); } else { document.body.style.overflow = ''; this.isAnimated = false; } } }, methods: { handleMaskClick() { if(this.maskClosable) { this.$emit('update:visible', false); this.$emit('cancel'); } }, handleConfirm() { this.$emit('confirm'); this.$emit('update:visible', false); }, handleCancel() { this.$emit('cancel'); this.$emit('update:visible', false); } } } </script> <style scoped> /* 遮罩层 */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); transition: opacity 0.3s; } /* 弹窗主体 */ .modal-content { position: fixed; background: #fff; border-radius: 24rpx 24rpx 0 0; width: 100%; box-sizing: border-box; transition: transform 0.3s ease-out; } /* 底部定位样式 */ .modal-content.bottom { bottom: -100%; transform: translateY(0); } .modal-content.bottom.show { bottom: 0; transform: translateY(0); } /* 中间定位样式 */ .modal-content.center { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.7); opacity: 0; width: 80%; border-radius: 24rpx; } .modal-content.center.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* 内容区域 */ .modal-body { padding: 32rpx; font-size: 28rpx; color: #666; } /* 底部按钮 */ .modal-footer { display: flex; padding: 24rpx; border-top: 1rpx solid #eee; } .modal-footer button { flex: 1; margin: 0 12rpx; height: 80rpx; line-height: 80rpx; font-size: 30rpx; border-radius: 12rpx; } .btn-cancel { background: #f5f5f5; color: #333; } .btn-confirm { background: #007AFF; color: #fff; } </style> ``` --- ### 使用示例 ```html <!-- 页面中使用 --> <template> <view> <button @tap="showModal = true">打开弹窗</button> <custom-modal v-model:visible="showModal" title="操作确认" position="bottom" @confirm="onConfirm" > <view>确定要执行此操作吗？</view> </custom-modal> </view> </template> <script> import CustomModal from '@/components/custom-modal.vue' export default { components: { CustomModal }, data() { return { showModal: false } }, methods: { onConfirm() { uni.showToast({ title: '确认操作' }) } } } </script> ``` --- ### 关键实现技巧 1. **层级控制** - 遮罩层设为`9998` - 弹窗主体设为`9999` - 微信小程序默认tabbar层级为999 2. **滚动穿透处理** ```javascript // 在弹窗显示时禁用页面滚动 document.body.style.overflow = 'hidden'; // 阻止touchmove事件冒泡 @touchmove.stop.prevent="()=>{}" ``` 3. **动画优化** - 使用CSS transform代替top/bottom定位动画 - 添加50ms延迟触发动画，避免渲染不同步 4. **多位置适配** - 通过`position`prop支持`top/center/bottom`三种定位方式 - 不同位置对应不同的动画效果 --- ### 平台适配要点 1. **微信小程序特殊处理** ```css /* 适配iPhoneX底部安全区 */ .modal-content.bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ``` 2. **支付宝小程序兼容** ```javascript // 在mounted生命周期添加 if(process.env.UNI_PLATFORM === 'mp-alipay') { this.maskZIndex = 999; this.contentZIndex = 1000; } ``` --- ### 常见问题解决方案 **问题1：弹窗底部留白** 解决方案：检查页面是否使用`tabBar`配置，添加安全区占位： ```css .modal-content.bottom { padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx); } ``` **问题2：快速点击导致动画异常** 解决方案：添加点击锁： ```javascript data() { return { clickLock: false } }, methods: { handleConfirm() { if(this.clickLock) return; this.clickLock = true; // ...执行操作 setTimeout(() => { this.clickLock = false; }, 300); } } ``` **问题3：键盘弹出遮挡内容** 解决方案：在输入框聚焦时动态调整定位： ```javascript onInputFocus() { if(this.position === 'bottom') { this.position = 'center'; } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值