微信小程序自定义弹窗，禁止page页面滚动。

最新推荐文章于 2025-04-10 14:27:29 发布
原创 最新推荐文章于 2025-04-10 14:27:29 发布 · 1.0k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

博客主要提及在弹窗标签上添加属性，属于信息技术中前端开发相关操作，可用于优化页面交互等功能。

在弹窗标签上面添加 catchtouchmove='true'属性。

微信小程序弹窗禁止页面滚动
明知山
12-30 3364
在小程序弹窗时，外部页面禁止滚动， 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动，需要用scroll-view包裹，并设置scroll-y catchtouchmove需要接收个方法，不然会一直警告 <view class="box">占位</view> <view class="pop" catchtouchmove="touchMove"> <view class="popbg"></view> &lt.
微信小程序——小实现(禁止页面滚动、长按复制、长按识别二维码)
Joyce的前端日常
10-17 9861
###1. 禁止页面滚动 对于小程序某些一屏的页面，特别是全屏的swiper，并不希望页面在竖直方向上可以滚动。 实现方式： 在需要禁止滚动页面的json中加入： &quot;disableScroll&quot;: true 注意：只在页面配置中有效，无法再app.json中设置该项 参考：https://developers.weixin.qq.com/miniprogram/dev/framework/con...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
01-20
scroll-view滚动穿透，阻止滚动 页面弹窗阻止滚动是一种常见的问题，这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove=doNothing></view> 也可直接写catchtouchmove，相当于绑定了事件名为true的事件 问题场景 在小程序中，在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素，必须使用
禁止页面滚动的方法-微信小程序
FaxMiao的博客
04-10 1338
在微信小程序中，有几种方法可以禁止页面滚动。
微信小程序弹窗之后禁止页面滚动
肖肖肖丽珠的博客
09-19 1291
但是这种方法适用于没有滚动条的页面。点击的是第二页的一个内容弹窗的。这会导致页面滚动条又跑到最前面。看到网上一个说法是弹窗之后给当前页面最外层加个position:fixed。catchtouchmove="true"就行啦。
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
01-20
本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法，供大家参考，具体内容如下 先看效果是否是自己需要的 实现步骤： 1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性 ...
微信小程序之自定义模态弹窗（带动画）实例-——-微信小程序实战系列（8）
2401_84149256的博客
04-20 753
masktop: 0;left: 0;left: 0;超出父盒子高度可滚动.btn_ok{.top{.bottom {.title {color:#000;input {
微信小程序实现自定义modal弹窗封装的方法
08-27
微信小程序实现自定义modal弹窗封装的方法主要介绍了小程序自定义modal弹窗封装实现方法，本文通过实例代码相结合的形式给大家介绍的非常详细。 知识点一：小程序官方提供的wx.showModal方法 小程序官方提供了wx....
微信小程序之自定义模态弹窗（带动画）实例-——-微信小程序实战系列（8）(1)
2401_84149213的博客
04-20 625
这样的模态弹窗，充其量只能做个alert，提示一下信息。但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法buttonbuttonmaskcontent使用animation属性指定需要执行的动画弹窗标题确定button.btn {width: 80%;masktop: 0;left: 0;left: 0;
微信小程序禁止页面上下滑动的三个方式
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
微信小程序（6）——禁止页面滚动
热门推荐
蜗牛先生
08-02 6万+
▍写在前面（来访者请直接浏览下一条） 最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是fixed脱离文本流的，在上下滚动购物车列表的时候，底部的页面竟然也会跟着滚动，这怎么成，所以我就找了一下关于这个问题的解决方案。 ▍效果预览 首先小声说一句，为了节约时间，所以在做数据模拟显示的时候，所有的图片还有名...
微信小程序 弹窗禁止底部页面滚动
kaolagirl的博客
03-08 943
在弹窗上给添加catchtouchmove。
微信小程序 禁止页面下拉/滚动 【优化】
终日而思不如须臾所学。
03-18 8169
有的时候我们的页面做得比较短，为了增强用户体验，不希望用户可以下拉页面，因为下拉页面会有种页面松动的感觉，可以在该页面的json文件里配置，比如 "window": { "disableScroll": true } ...
微信小程序弹出层弹出后禁止页面滚动
灰灰的博客
03-08 1867
微信小程序弹出层禁止页面滚动
小程序显示弹窗时禁止下层的内容滚动
Sophia
08-17 1万+
小程序显示弹窗时禁止下层的内容滚动 ①  第一种方式 利用position:fixed.  禁止页面滚动. 一. 页面结构html  &lt;view class="indexPage {{proInfoWindow?'indexFixed':''}}"&gt; -----------此处为整个页面的结构内容 &lt;button catchTap="_proInfoWi...
微信小程序弹框禁止下面的页面滚动
S筱潇S四维Smile
11-09 702
一句话搞定： catchtouchmove="true" <view class="mark" wx:if='{{show}}' catchtouchmove="true"> <!--内容--> </view>
微信小程序弹出层禁止滚动穿透
sxy323的博客
04-19 1648
uniapp实现微信小程序中禁止滚动穿透、打开弹出层禁止底部页面滚动
微信小程序禁用页面滚动的几种方式
weixin_53641562的博客
06-03 3821
微信小程序禁用页面滚动的几种方式
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
唯独是你的博客
04-03 878
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 解决方法： 在弹出层加上 catchtouchmove 事件 示例代码： <view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"> <...
微信小程序如何弹窗获取用户信息的窗口
最新发布
07-30
我们正在讨论微信小程序中实现弹窗获取用户信息的功能。根据微信官方的最新政策，获取用户信息的方式已经有所变化，特别是需要用户主动触发（例如点击按钮）才能获取。因此，弹窗获取用户信息通常需要结合按钮来实现...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值