小程序 自定义弹框 阻止后面页面滚动

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

本文介绍了一个使用catchtouchmove属性的示例。该属性被应用于一个隐藏的视图元素上，通过绑定一个名为stopScroll的事件处理器来阻止触摸滚动行为。此技术常用于移动端Web应用中，以实现特定的交互效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

// 加上 catchtouchmove 属性
<view hidden='{{showFrame}}' class='frame' catchtouchmove='stopScroll'>

</view>
// js
stopScroll(){return}
微信小程序自定义滚动选择器
qq_42589920的博客
09-06 2460
最近项目里有个需求要做个滚动选择器，在网上找了半天也没找到合适的demo，没办法只能发挥我的聪明才智创造一个，不哔哔上代码。 js: Page({ /** * 页面的初始数据 */ data: { list: ['0分', '1分', '2分', '3分', '4分', '5分', '6分', '7分', '8分', '9分', '10分', '11分', '12分'...
解决微信小程序自定义弹窗滚动穿透问题
aaa123aaasqw的博客
05-30 1611
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
小程序显示弹框禁止页面滚动
LZhizi的博客
11-10 166
catchtouchmove 在面板上加上
小程序弹框遮罩禁止页面滚动
qq_41896605的博客
11-19 727
小程序弹框遮罩禁止页面滚动 弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 解决方法： 给当前遮罩加catchtouchmove="ture"属性 <view class="modal-view" style="z-index:999;" bindtap="toggleModal" catchtouchmove="true"> 在电脑上测试是没有用的，这是触摸事件。因此，需要在手机端测试，预览生成一个开发版，用手机微信扫描即可看到效果。 ...
微信小程序弹框禁止下面的页面滚动
S筱潇S四维Smile
11-09 617
一句话搞定： catchtouchmove="true" <view class="mark" wx:if='{{show}}' catchtouchmove="true"> <!--内容--> </view>
微信小程序设置弹框底下内容不能移动 滚动（滚动穿透问题）
最新发布
weixin_43923808的博客
10-23 1357
设置垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。
小程序弹出层禁止列表滑动_小程序显示弹窗时禁止下层的内容滚动实现方法
weixin_39591455的博客
02-12 243
小程序显示弹窗时禁止下层的内容滚动实现方法，具体如下① 第一种方式利用position:fixed. 禁止页面滚动.一. 页面结构html-----------此处为整个页面的结构内容点击显示弹窗// 当proInfoWindow为true的时候显示弹窗此处为弹窗内容二. CSS部分//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果.indexFixed{position...
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
10-16
微信小程序自定义弹窗的滚动行为与页面滚动冲突是一种常见问题，解决这个问题是提高用户体验的重要一环。接下来将详细介绍解决微信小程序自定义弹窗滚动与页面滚动冲突的方法。 首先，需要注意的是微信小程序页面...
微信小程序解决自定义弹出层滑动时，下层页面滚动问题
厦门在乎科技
06-16 3041
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，
微信小程序弹出框竖向滚动_微信小程序 弹出框 自定义 可滚动
weixin_35647799的博客
12-23 820
最近在写一个装修的活动，规则是点击按钮弹出加上相应的动画首先我们需要一个按钮触发显示(如图，点击详细规则显示规则模态框，图二右边的滚动条在手机上不显示) 思路：小程序自己的模态框不能写样式，这是个比较尴尬的情况，这是一个比较小白的解决方案：在前端写一个视窗，默认让它隐藏，我这边是用showModel来控制，默认给它false，当点击规则按钮是将showModel的值改为true，点击关闭按钮将s...
小程序弹出层禁止列表滑动_小程序解决自定义弹出层滑动时下层页面滚动问题--穿透问题...
weixin_36304957的博客
01-14 431
一、问题描述小程序自带弹框满足不了某些需求，为此则需要设置自定义弹框，但是问题来了，在滑动弹层的时候，弹层页面会随着弹层底部的滚动条滚动二、解决办法在弹出层加上 catchtouchmove 事件- 如果弹层里的内容需要滚动则需要使用scroll-view组件原理：弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动，但是如果弹窗元素设置了该属性...
微信小程序禁止页面上下滑动的三个方式
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
小程序禁止弹框下面的内容滑动
qq_40039641的博客
07-03 4015
加上catchtouchmove='true' 这个属性就可以&lt;view class="complaints-bounced" hidden="{{bounced}}" catchtouchmove='true'&gt; &lt;view class="mask"&gt;&lt;/view&gt; &lt;view class="complaints-content&a
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
热门推荐
lomenw的博客
06-08 4万+
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法：在弹出层加上 catchtouchmove 事件 示例代码：&lt;view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"&gt;  &lt;view class="m
小程序弹框出现，底部页面也跟随滚动
weixin_30763455的博客
01-23 454
设置catchtouchmove="true" <view class="modal" catchtouchmove="true"> <view class="shade"></view> <view class="content"></view> </view> 转载于:https://www.cn...
微信小程序 -解决弹窗滚动穿透问题
weixin_41195867的博客
12-03 1585
微信小程序 用fixed设置弹窗蒙层，当弹窗和内容都存在滚动时，滑动弹窗蒙层，下面的页面会有滚动。 希望的效果是弹窗内能正常滚动，滑动弹窗蒙层，下面页面不会产生滚动。 例如：页面上内容也有滚动，弹窗里有展示许多部分内容，需要滚动浏览。 代码块：https://developers.weixin.qq.com/s/hfS1ljmt7NmG （滑动蒙层，下面的页面不会产生滚动，但是但是，弹窗里的内容滚动超级不好，滚动反应很迟钝，要划4~5次才能滑动内容） modal.wxml <view catchtou
小程序自定义弹窗禁止底部内容滚动（滚动穿透问题）
web全栈开发的博客
07-04 2510
小程序自带的弹窗比较简单，在实际项目中，我们往往需要自定义弹窗以满足较为复杂的业务需求。弹窗时底层内容一般都是不滚动，我们可以用下面几种方法实现： 1、catchtouchmove=“true” 可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动，如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。 <view class="modal" catchtouchmove="true">...
微信小程序 - vant popup弹出层阻止底层页面滑动
idomyway的博客
08-30 1万+
前言     在小程序编写过程中使用使用vant weapp的popup组件做小程序的弹出层，触屏导致底层页面跟着滑动。 解决方法     使用touch事件阻止属性，@touchmove.stop.prevent指向空事件 van-popup( :show="popupShow" :z-index="999" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值