微信小程序-自定义弹窗禁止页面上下滑动

最新推荐文章于 2023-03-15 17:20:49 发布
原创 最新推荐文章于 2023-03-15 17:20:49 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

本文讲解了如何通过设置catchtouchmove或catchtouchstart属性为true来捕获touch事件，这对于移动设备上的应用交互设计至关重要。

设置catchtouchmove="true"或者catchtouchstart='true'，true不定义

微信小程序禁止页面上下滑动；uni-app微信小程序禁止页面上下滑动；uni-app小程序上下滑动；
i_am_a_div的博客
10-13 2668
阻止小程序某个页面上下滑动，最简单有效方法；直接对小程序当前页的最外层标签盒子，设置固定定位即可！ 设置固定定位后，页面的最大盒子宽度可能不是自动撑满的，那就自己在calc计算下宽度即可 .box { // 加这两行代码是为了固定定位 解决此页面上下可滑动回弹问题 position: fixed; width: calc(100vw - 110rpx); height: calc(100vh - 100rpx); padding: 50rpx 55rpx; } ...
12_微信小程序-BLE低功耗蓝牙开发-自定义弹窗界面
顺溜的博客
02-21 863
在获取服务列表和特征值列表完成后，需要把相关的信息呈现出来，这里采用一个弹窗界面，把服务ID和特征值ID显示出来。微信小程序的原生弹窗不能满足需求，这里只有自定义弹窗窗界面了。 wxml代码： <!--弹出框--> <!--要加上catchtouchmove="dialogViewTouchMove"，否则页面可滑动--> <view class="dialogView" catchtouchmove="dialogViewTouchMove" wx:if="{{dial
微信小程序禁止页面上下滑动的三个方式
热门推荐
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
小程序禁止页面上下滑动
Iphone886的博客
02-10 629
单页面禁止上线下滑动，页面弹窗后，页面禁止上下滑动
小程序页面禁止滑动
weixin_33774308的博客
04-08 3032
要做一个弹窗功能，弹窗是可以拖拽的，而且弹窗里的元素是有bindtap事件的，在弹窗使用了bindtouchstart之后发现弹窗拖拽的同时背景也在滑动，改为使用了catchtouchstart之后背景不滑动了，但是发现子元素的bindtap事件无法执行，于是又改为了bindtouchstart，换一种思路，选择另一种方法就是如何让页面禁止滑动，只需要加上下边的代码到本页json文件就可以了 ，...
小程序如何禁止用户上下滑动
hfdxmz_3的博客
08-04 816
写个这种效果出来 很多时候我们想禁止用户的上下滑动的操作 catchtouchmove="preventMove" 在view上加这个代码即可 （ps：别用鼠标滚轮啊 真机调试）
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
10-16
微信小程序自定义弹窗的滚动行为与页面滚动冲突是一种常见问题，解决这个问题是提高用户体验的重要一环。接下来将详细介绍解决微信小程序自定义弹窗滚动与页面滚动冲突的方法。 首先，需要注意的是微信小程序页面...
微信小程序-自定义从底部弹起的滚动选择器
10-12
在微信小程序中，为了提供丰富的用户交互体验，开发者往往需要实现各种自定义组件，其中就包括了从底部弹起的滚动选择器。这个自定义组件在许多场景下都非常实用，比如设置选项、日期选择等。 1. **自定义标题** ...
微信小程序：自定义滚动弹窗
botellei的博客
12-19 4702
微信小程序：自定义滚动弹窗 微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求，所以我们可以自己尝试制作自定义弹窗，话不多说，直接上图： 其中列表部分支持滚动，所以信息承载能力很强。 实现代码： wxml: <button class="showModal" bindtap="showModal_click">唤出弹窗</button> <!--弹窗--> <view class="modal-mask" bindtap="hideMod
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
唯独是你的博客
04-03 880
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 解决方法： 在弹出层加上 catchtouchmove 事件 示例代码： <view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"> <...
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
10-15
主要介绍了微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置，具体实例代码跟随小编一起看看吧
微信小程序页面上下滚动效果
10-16
主要为大家详细介绍了微信小程序页面上下滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序显示弹窗时禁止下层的内容滚动实现方法
10-17
主要介绍了小程序显示弹窗时禁止下层的内容滚动实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序自定义可滑动日历界面
10-17
主要为大家详细介绍了微信小程序自定义可滑动日历界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序自定义弹出模态框禁止底部滚动功能
10-15
主要介绍了微信小程序自定义弹出模态框禁止底部滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序page禁止页面上下滑动
S筱潇S四维Smile
04-22 6399
在单页面设置disableScroll为true即可; 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置 在需要的页面的json文件里添加即可： { "disableScroll":true }
小程序 页面禁止左右上下滑动
weixin_45102016的博客
10-20 699
{ “usingComponents”: { “i-checkbox-group”: “…/…/…/dist/checkbox-group/index”, “i-checkbox”: “…/…/…/dist/checkbox/index”, “i-radio-group”: “…/…/…/dist/radio-group/index”, “i-radio”: “…/…/…/dist/radio/index”, “i-toast”: “…/…/…/dist/toast/index” }, “navigatio
微信小程序弹窗打开时，控制页面不能滚动
weixin_43834227的博客
03-15 1962
微信小程序弹窗与页面滚动问题处理
微信小程序-自制弹出框禁止页面上下滑动
weixin_30315723的博客
09-06 309
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 解决方法： 在弹出层加上 catchtouchmove 事件 两种方法:(在电脑上测试是没有用的，这是触摸事件。因此，需要在手机端测试，预览生成一个开发版，用手机微信扫描即可看到效果) 1. wxml: <!-- 首页弹窗 --> <view class='Popup' hidden...
微信小程序自定义弹窗输入组件详解与实现
本文将深入解析如何在微信小程序中自定义实现一个弹窗输入组件，包括遮盖层的创建与管理以及弹窗窗口的具体构造。 首先，实现弹窗输入需要一个半透明的遮盖层，这个遮盖层用来暂时隐藏其他内容并引导用户关注弹窗。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值