小程序如何解决屏幕禁止滑动

小程序滑动禁用技巧
本文介绍了在小程序中实现屏幕滑动禁用的方法,通过使用动态绑定scroll-view的scroll-y属性,结合设置Page的overflow-y属性及scroll-view的高度属性,实现了全局滑动禁用的效果。此外还提供了一种更简便的方法,即在外层添加一个view元素并动态计算设备高度。

小程序如何解决屏幕禁止滑动,并且不影响滑动事件

https://www.jianshu.com/p/602...

1.整个布局用<scroll-view>作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{isScroll}}">
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true

刚刚已经解决了,很好用哦!

如果没有下拉刷新呢,用上面的方法还是可以的,上面的方法是针对了page设置全局的哦,对于有滚动事件,比如下拉刷新或者上拉加载的是不适用的哦,今天又试了一下更简单的方法哦。在外层添加一个view
<view class='page' style='height:{{clientHeight}};overflow:{{overflow}};'> 然后动态算出设备高度, wx.getSystemInfo windowHeight 。就可以啦,直接控制外层view的overflow

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

余额充值