小程序如何禁止用户上下滑动

最新推荐文章于 2024-09-19 14:00:47 发布
原创 最新推荐文章于 2024-09-19 14:00:47 发布 · 815 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在移动端和网页应用中禁用用户上下滑动操作的方法，通过在view元素上添加catchtouchmove=preventMove代码实现，适用于真机调试，避免了不必要的滚动干扰。

写个这种效果出来 很多时候我们想禁止用户的上下滑动的操作

catchtouchmove="preventMove"

在view上加这个代码即可  （ps：别用鼠标滚轮啊 真机调试）

微信小程序禁止页面上下滑动；uni-app微信小程序禁止页面上下滑动；uni-app小程序上下滑动；
i_am_a_div的博客
10-13 2657
阻止小程序某个页面上下滑动，最简单有效方法；直接对小程序当前页的最外层标签盒子，设置固定定位即可！ 设置固定定位后，页面的最大盒子宽度可能不是自动撑满的，那就自己在calc计算下宽度即可 .box { // 加这两行代码是为了固定定位 解决此页面上下可滑动回弹问题 position: fixed; width: calc(100vw - 110rpx); height: calc(100vh - 100rpx); padding: 50rpx 55rpx; } ...
微信小程序 界面禁止下拉 左右滑动_微信小程序实现卡片左右滑动效果
weixin_39542608的博客
11-20 908
前言 快放假了，人狠话不多，啥也不说了。先看效果图。 思路 从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。卡片滑动的时候有一定的加速度。如果滑动距离太小，则依旧停留在当前卡片，而且有一个回弹的效果。 看到这样的需求，不熟悉小程序的同学，可能感觉有点麻烦。首先需要计算卡片的位置，然后再设置滚动条的位置，使其滚动到指定的位置，而且在滚动的过程中，加上一点加...
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
10-15
主要介绍了微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置，具体实例代码跟随小编一起看看吧
小程序禁止页面上下滑动
Iphone886的博客
02-10 628
单页面禁止上线下滑动，页面弹窗后，页面禁止上下滑动
小程序页面禁止滑动
weixin_33774308的博客
04-08 3032
要做一个弹窗功能，弹窗是可以拖拽的，而且弹窗里的元素是有bindtap事件的，在弹窗使用了bindtouchstart之后发现弹窗拖拽的同时背景也在滑动，改为使用了catchtouchstart之后背景不滑动了，但是发现子元素的bindtap事件无法执行，于是又改为了bindtouchstart，换一种思路，选择另一种方法就是如何让页面禁止滑动，只需要加上下边的代码到本页json文件就可以了 ，...
微信小程序页面上下滚动效果
10-16
在微信小程序中，实现页面上下滚动效果是一种常见的交互设计，它能提供良好的用户体验，使得用户可以轻松浏览和导航多内容的页面。以下我们将详细探讨如何在微信小程序中创建这种滚动效果。 首先，我们需要理解微信...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
在uni-app中，开发一个具备自定义文案和上下滑动选择日期功能的日历组件，可以大大提升用户体验。下面将详细解释这个组件的相关知识点。 1. **uni-app框架**：uni-app是一个基于Vue.js的开发框架，它的核心思想是...
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
11-30
在微信小程序中，实现类似今日头条那样可滑动切换的导航栏和内容滚动同步的效果，主要涉及到以下几个关键知识点： 1. **布局结构**： - 主体页面通常采用两层结构，外层是一个横向滚动的`<scroll-view>`作为导航栏...
微信小程序实现卡片层叠滑动效果
10-16
在微信小程序中实现卡片层叠滑动效果，可以帮助开发者创建更丰富和直观的用户交互体验。实现该效果需要涉及到微信小程序的前端技术，如wxml、wxss和JavaScript等。 微信小程序页面中使用js文件编写JavaScript代码，...
微信小程序禁止页面上下滑动的三个方式
热门推荐
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
小程序显示弹窗时禁止下层的内容滚动实现方法
10-17
主要介绍了小程序显示弹窗时禁止下层的内容滚动实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序swiper禁止用户手动滑动代码实例
10-16
主要介绍了微信小程序swiper禁止用户手动滑动代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
01-20
scroll-view滚动穿透，阻止滚动 页面弹窗阻止滚动是一种常见的问题，这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove=doNothing></view> 也可直接写catchtouchmove，相当于绑定了事件名为true的事件 问题场景 在小程序中，在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素，必须使用
微信小程序-自定义弹窗禁止页面上下滑动
cc1314_工作、学习有感
12-11 1497
设置catchtouchmove="true"或者catchtouchstart='true'，true不定义
微信小程序自定义弹窗开启后禁止页面上下滑动
05-28 489
添加自定义的弹出框后，当滚动弹框时时下边的页面也会跟着滚动 解决办法： 在弹出层上添加 catchtouchmove='true' 注： 开发者工具上不起作用，需要在真机上测试 web前端交流QQ群：327814892
小程序 页面禁止左右上下滑动
weixin_30432579的博客
11-17 1269
"disableScroll": true 转载于:https://www.cnblogs.com/wangshishuai/p/9974839.html
微信小程序开发-滑动操作
qq_45670012的博客
09-30 320
在实际应用中，当某种手势被触发后，在用户没有放开鼠标或手指前，会一直识别为该手势。比如当用户触发左滑手势后，这时再向下滑动，仍要按照左滑手势来处理。 可以定义一个标记来记录第一次识别到的手势，如果已识...
微信小程序弹窗之后禁止页面滚动
肖肖肖丽珠的博客
09-19 1280
但是这种方法适用于没有滚动条的页面。点击的是第二页的一个内容弹窗的。这会导致页面滚动条又跑到最前面。看到网上一个说法是弹窗之后给当前页面最外层加个position:fixed。catchtouchmove="true"就行啦。
移动端弹出层上禁止页面滚动
anfisherman的博客
04-11 4998
弹出层上禁止页面滚动
微信小程序 禁止上下滑动
最新发布
05-13
### 微信小程序禁止页面上下滑动的实现方法 在微信小程序开发过程中，如果需要禁用某页面的上下滑动功能，可以通过多种方式进行设置。以下是几种常见的实现方式： #### 方法一：通过 `app.json` 或页面级 `json` 文件配置 可以在全局文件 `app.json` 的 `window` 属性中添加 `"disableScroll": true` 来禁用整个应用的页面滚动[^1]。然而，这种方式会作用于所有页面，可能会带来不必要的副作用。 为了更精细地控制特定页面的行为，在目标页面对应的 `.json` 文件中单独设置 `"disableScroll"` 即可： ```json { "navigationBarTitleText": "首页", "disableScroll": true } ``` 这种方法的优点在于无需额外编写样式或逻辑代码，缺点是仅适用于简单的场景，对于复杂需求可能不够灵活。 --- #### 方法二：利用 CSS 固定定位 另一种常见的方式是对页面最外层容器使用固定的布局策略来锁定屏幕位置[^2]。具体做法是在该页面的主要视图组件上定义如下样式规则： ```css .box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; /* 可选 */ } ``` 这样可以有效地防止用户触碰操作引发的内容位移现象。需要注意的是，当采用这种方案时应确保内部子元素不会超出可视区域范围以免影响用户体验效果。 此外还可以借助媒体查询适配不同设备尺寸下的表现形式，从而进一步提升兼容性和美观度。 --- #### 方法三：拦截触摸事件 针对某些特殊情况下（如自定义模态对话框显示期间），除了单纯限制整体文档流之外还需要阻止默认行为的发生，则可通过绑定 `catchtouchmove` 事件处理器达成目的[^3]。例如下面这段 WXML 结构展示了如何创建一个不可拖拽移动的弹出窗口实例： ```html <view class='Popup' hidden="{{!show}}" bindtap.stop="noop" catchtouchmove> </view> <!-- 对应 JS --> Page({ data:{ show:false, }, noop(){} }) ``` 这里的关键点在于给 `<view>` 添加属性 `catchtouchmove` 并将其赋值为空函数或者直接写成字符串 `'true'`, 这样就能成功捕获并终止任何试图改变当前位置的操作尝试了. 以上三种途径各有优劣之处，开发者应当依据实际项目情况合理选用最适合自己的解决方案。 ```python // 示例 Python 注释，无关本题 print("This is a sample python code block.") ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值