微信小程序禁止页面上下滑动的三个方式

第一种方式:

页面最外层的盒子,使用绝对定位!这样页面也就不能滑动了!此方法呢,比较麻烦,写的代码比较多!但是还是能够实现的!源码如下:

 position: fixed;
  top:0;
  left:0;

第二种方式:

在微信小程序app.json的window中,添加”disableScroll”:true,但是要注意,如果你是要在app.json中添加disableScroll,会导致所有页面无法上下滑动,这就是个大bug了,解决也很简单,你想在那个页面禁止页面滑动,就在哪个页面的json下,添加disableScroll就可以了,单独设置就行!代码如下:

//app.json中添加,window里面添加就可以了
  "window": {
    "disableScroll": true
  },
  
  //单独设置,比如index下,就在index.json设置
  {
    "navigationBarTitleText": "首页",
    "disableScroll":true
  }

但是有些时候使用disableScroll并不合适,比如一个长页面,我需要弹窗出来的时候,才禁止上下滑动,弹窗隐藏的时候,又可以上下滑动!那就衍生第三个方式

第三种方式:

在弹窗的遮罩层或者内容层的view上,添加catchtouchmove=’true’,这个意思就是,你添加了catchtouchmove view的盒子,用户如果在这个盒子滑动的时候,是不能触发滑动效果的,一定要看清楚字面意思,不然会写错view,导致无效果哦!代码如下:

//弹窗遮罩层
<view  catchtouchmove='true'>
</view>

### 微信小程序禁止页面上下滑动的实现方法 在微信小程序开发过程中,如果需要禁用某页面上下滑动功能,可以通过多种方式进行设置。以下是几种常见的实现方式: #### 方法一:通过 `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
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值