微信、手机页面禁止页面下拉

最新推荐文章于 2023-11-18 14:33:11 发布

原创最新推荐文章于 2023-11-18 14:33:11 发布 · 8.3k 阅读

1 ·

CC 4.0 BY-SA版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章

订阅专栏

Java全栈之路

55 篇文章

订阅专栏

本文介绍了一种使用JavaScript阻止移动端浏览器页面发生触摸滚动的方法。通过为document.body添加touchmove事件监听器并调用event.preventDefault()阻止默认滚动行为，实现页面在移动端设备上的固定显示。

window.onload = function(){
    document.body.addEventListener("touchmove",function(event){
        event.preventDefault();
        });
};

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xyphf_和派孔明

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信公众号页面禁止页面下拉查看网页来源

WanFengZhou

03-23

2254

微信公众号页面禁止页面下拉查看网页来源应产品需求加一个禁止页面下拉查看网页来源的功能，网上看了下结合自己的情况完美实现， JS代码如下 function noPullDown(selector) { //禁止页面拖动 document.querySelector('body').addEventListener('touchmove', function (e) { ...

微信禁止下拉查看URL的处理方法

11-28

1. **禁止`touchmove`事件**：这是最简单的处理方式，通过监听移动端的`touchmove`事件并阻止其默认行为，可以防止页面下拉。示例代码如下： ```javascript var touch1 = function() { document.querySelector('...

参与评论您还未登录，请先登录后发表或查看评论

禁止微信下拉

zhaozilong666的博客

07-03

822

微信下拉会展现ip地址黑框，google后发现了一个可以禁止的js片段： /** * 禁止浏览器下拉回弹 */ function stopDrop() { var lastY;//最后一次y坐标点 $(document.body).on('touchstart', function(event) { lastY

H5页面禁用微信浏览器下拉

12-07

H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。

微信浏览器禁止页面下拉查看网址实例详解

12-09

微信浏览器禁止页面下拉查看网址实例详解此类事件是手机touchmove默认事件行为，可以通过js代码隐藏事件： $(‘body').on(‘touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false); 但这样往往会把页面原生的scroll效果也一同去掉了，下面的代码可以完美解决这个问题： var overscroll = function(el) { el.addEve

微信端防止下拉

weixin_34216196的博客

02-24

139

本文参考了，https://segmentfault.com/a/1190000013335812 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equi...

阻止微信下拉

dandan__666的博客

02-11

241

阻止微信下拉： document.body.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false });

阻止微信浏览器下拉

a603423130的博客

08-05

625

function noPullDown(selector) { //禁止页面拖动 document.querySelector('body').addEventListener('touchmove', function (e) { console.log('禁止下拉出现网页来源信息') if(!selector) { e.preventDefault() } else { // 如果需要部分区域

禁止手机浏览器、微信浏览器的上下滑动露出黑色块问题

阳光下的木子林的博客

05-30

9616

禁止手机浏览器、微信浏览器的上下滑动露出黑色块问题 document.querySelector('body').addEventListener('touchstart',function (ev) { event.preventDefault(); })

微信小程序禁止左右滑屏

du_5pet的博客

07-14

2881

直接给最外层的view设置一个overflow-x:hidden; /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 60rpx 0; box-sizing: border-box; overflow-x:hidden; } ...

微信禁止页面滑动方法-IOS安卓PC通用

kangchutoudewa的专栏

07-17

1857

网上找到方案： document.body.removeEventListener('touchmove',scrolling(),false); document.body.addEventListener('touchmove', scrolling(),false); 但是并没有生效,最终结果： document.addEventListener('touchmove', sc...

手机端禁止浏览器左右滑动

weixin_30810583的博客

06-25

4151

在手机端vue项目中，禁止页面左右滑动，代码直接写在index.html中 var startPos = 0,endPos = 0,isScrolling = 0; document.addEventListener('touchstart',function(event){ var touch = event.targetTouches[0]; //touches数组对象...

从微信打开链接不能正常上下滑动

Milan_KunderLa的博客

09-03

6378

原因是微信自己带有一个滑动默认行为，所以滑动的事件监听不能放在body上面，而是应该放在其他节点上。同时如果其他节点还有另外的点击触摸事件，不能取消掉事件冒泡，否则会没有反应。 ...

微信端加载中禁止滑动页面与恢复

大宅广的博客

07-12

1063

$('body').on('touchmove', function (event) { event.preventDefault(); });$("body").unbind('touchmove');

uniapp中的H5页面微信浏览器中禁止下拉出现网页由xxx.xxxxx.com提供，QQ浏览器X5内核提供技术支持这个

weixin_41463944的博客

11-18

1092

uniapp中的H5页面微信浏览器中禁止下拉出现网页由xxx.xxxxx.com提供，QQ浏览器X5内核提供技术支持这个

微信开发-苹果手机无法滑动页面

哈利路亚的博客

07-10

5251

使用的是微信提供的weiui样式库。其中的一个样式为： slideIn cell"> 去掉样式中的slideIn 。修改为：同时，需要重新page的样式，修改为： .page{ overflow-y:auto; opacity:1; } 主要是修改透明度。这些样式都是weiui样式库中的example.css中的，拿来直接使

js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页，附：demo

最新发布

08-08

<think>我们注意到用户的新问题与之前的问题不同。之前的问题是关于调整图片位置，而这次用户询问的是“下拉式页面”效果（可能指下拉刷新或页面整体下拉效果）。根据用户描述，用户意图是了解如何在微信开发者工具中实现或调整下拉式页面效果。微信小程序中常见的“下拉式页面”效果有两种： 1. 页面整体下拉效果（bounce效果）：指页面在顶部或底部被下拉时的弹性效果。 2. 下拉刷新（pull-to-refresh）：用户下拉页面触发刷新的交互。根据用户问题，我们重点讲解这两种效果的实现和调整方法。一、页面整体下拉效果（bounce效果）：微信小程序页面默认支持在顶部下拉和底部上拉的弹性效果（类似于橡皮筋的弹性）。这个效果可以通过页面配置文件（.json）或全局配置文件（app.json）中的`enablePullDownRefresh`和`backgroundColor`等配置项进行调整。但是注意：整个页面的弹性效果（bounce）在微信小程序中默认是开启的，但我们可以通过以下方式调整或关闭： 1. 关闭整个页面的下拉弹性效果（bounce）：在页面对应的.json文件中设置： ```json { "disableScroll": true } ``` 这样整个页面将不能滚动，也就没有弹性效果了。但通常我们不需要完全禁止滚动，而是希望保留滚动但关闭弹性效果。然而，小程序并没有直接提供关闭bounce效果的配置，所以通常的做法是使用`scroll-view`组件代替整个页面的滚动。 2. 使用`scroll-view`组件控制滚动区域：在页面的WXML中，用`scroll-view`包裹整个页面内容，然后设置`scroll-y`属性允许纵向滚动，并设置`bounces`属性（注意：微信小程序的`scroll-view`组件的`bounces`属性在基础库2.9.0以上支持，用于控制是否开启回弹效果，但仅iOS有效）： ```html <scroll-view scroll-y bounces="{{false}}" style="height: 100vh;">  </scroll-view> ``` 但是注意：`bounces`属性在安卓上无效，且设置`bounces`为false在iOS上可以关闭回弹效果。二、下拉刷新（pull-to-refresh）：微信小程序提供了标准的下拉刷新功能。 1. 开启下拉刷新：在页面的.json文件中设置： ```json { "enablePullDownRefresh": true } ``` 2. 在页面.js文件中监听下拉刷新事件： ```javascript Page({ onPullDownRefresh() { console.log('下拉刷新'); // 模拟异步加载数据 setTimeout(() => { // 停止下拉刷新动画 wx.stopPullDownRefresh(); }, 1000); } }); ``` 3. 自定义下拉刷新样式：在页面的.json文件中，可以设置背景颜色和loading样式： ```json { "enablePullDownRefresh": true, "backgroundTextStyle": "dark" // 或 "light"，表示loading图标的颜色 } ``` 或者使用自定义下拉刷新（基础库2.10.0及以上支持）：在页面.json中： ```json { "enablePullDownRefresh": true, "backgroundColor": "#f5f5f5", // 下拉背景颜色 "backgroundTextStyle": "dark" // 下拉loading样式 } ``` 更高级的自定义可以使用`wx.startPullDownRefresh`和`wx.stopPullDownRefresh`来控制，同时配合页面WXML中的自定义动画。 4. 调整下拉刷新的触发距离：在页面的.json文件中设置`onReachBottomDistance`（用于设置页面上拉触底事件触发时距离页面底部的距离，单位px）并不能影响下拉刷新。下拉刷新的触发距离是系统默认的，无法通过配置调整。但是，我们可以通过使用自定义的下拉刷新组件（如使用`scroll-view`组件的自定义下拉刷新）来模拟，这样我们可以控制触发距离。三、使用`scroll-view`实现自定义下拉刷新（更灵活）：如果标准的下拉刷新无法满足需求（比如需要控制触发距离、自定义动画等），可以使用`scroll-view`组件自定义下拉刷新。步骤： 1. 在WXML中，使用`scroll-view`组件，并绑定bindscrolltoupper（滚动到顶部/左边触发）和bindscroll等事件。 2. 在`scroll-view`内部，顶部放置一个自定义的刷新动画（如一个view，初始时隐藏或部分隐藏）。 3. 监听滚动事件，当滚动到顶部并继续下拉时，根据下拉的距离显示自定义的刷新动画。 4. 当达到触发条件时，执行刷新操作，刷新完成后重置状态。示例代码（简化）： WXML: ```html <scroll-view scroll-y style="height: 100vh;" bindscroll="onScroll" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" >  <view class="refresh-container" style="height: {{refreshHeight}}px; text-align: center;"> <view hidden="{{!refreshing}}">刷新中...</view> <view hidden="{{refreshing}}">下拉刷新</view> </view>  <view>...</view> </scroll-view> ``` JS: ```javascript Page({ data: { refreshHeight: 0, // 下拉刷新区域的高度 refreshing: false, // 是否正在刷新 startY: 0, // 触摸开始的位置 }, onTouchStart(e) { this.setData({ startY: e.touches[0].pageY }); }, onTouchEnd(e) { if (this.data.refreshHeight > 50) { // 如果下拉区域高度大于50px，则触发刷新 this.setData({ refreshing: true }); // 执行刷新操作 setTimeout(() => { this.setData({ refreshing: false, refreshHeight: 0 }); }, 2000); } else { this.setData({ refreshHeight: 0 }); } }, onScroll(e) { // 如果滚动到顶部并且下拉 if (e.detail.scrollTop <= 0) { // 计算下拉距离 const diff = e.detail.scrollTop - this.data.startY; if (diff < 0) { // 下拉 this.setData({ refreshHeight: Math.abs(diff) }); } } } }) ``` 注意：这种自定义下拉刷新需要处理很多边界情况，如滚动位置、触摸事件等，比较复杂。因此，如果标准的下拉刷新满足需求，建议使用标准方式。四、在微信开发者工具中调试： 1. 实时预览：修改代码后，工具会自动刷新，可以查看效果。 2. 调试：使用开发者工具的“调试”面板，可以查看页面结构（WXML）和样式（WXSS），以及控制台输出。 3. 模拟器：可以选择不同的设备模拟，查看不同屏幕尺寸下的效果。注意事项： - 使用标准下拉刷新时，注意在页面配置中开启`enablePullDownRefresh`，并记得在刷新完成后调用`wx.stopPullDownRefresh()`停止刷新动画。 - 自定义下拉刷新需要处理触摸事件和滚动事件，注意性能优化，避免频繁setData。通过以上方法，可以在微信开发者工具中实现和调整下拉式页面效果。 §§相关问题§§ 1. 微信小程序中如何实现上拉加载更多？ 2. 如何优化自定义下拉刷新的性能？ 3. 微信小程序中如何禁用页面滚动？</think>### 微信开发者工具下拉式页面实现方法在微信小程序中实现下拉式页面效果（如下拉刷新、弹性滚动等）主要通过以下两种方式实现： #### 一、使用页面配置文件（.json）控制基础效果 1. **开启全局下拉刷新** 在页面配置文件中设置： ```json { "enablePullDownRefresh": true, "backgroundTextStyle": "dark" // 刷新动画样式 } ``` - 在开发者工具模拟器中，下拉页面即可看到刷新动画[^1] 2. **调整下拉区域背景色** ```json { "backgroundColor": "#f5f5f5" // 下拉背景色 } ``` #### 二、使用 scroll-view 组件实现高级效果 ```html  <scroll-view scroll-y refresher-enabled bindrefresherrefresh="onRefresh" refresher-threshold="100" style="height: 100vh;" >  <view>下拉刷新区域</view> </scroll-view> ``` ```javascript // JS Page({ onRefresh() { console.log("刷新触发"); // 模拟数据加载 setTimeout(() => { wx.stopPullDownRefresh(); }, 1500); } }) ``` #### 三、关键参数说明 | 参数 | 说明 | 示例值 | |-----------------------|-------------------------------|-------------| | `refresher-enabled` | 开启自定义下拉刷新 | true | | `refresher-threshold` | 触发刷新的下拉距离（单位rpx） | 45-100 | | `refresher-background`| 下拉区域背景色 | "#efefef" | | `bindrefresherpulling`| 下拉过程中的回调 | 自定义动画 | #### 四、开发者工具调试技巧 1. **实时预览**：修改代码后自动刷新效果 2. **WXML面板**：检查元素布局和层级关系 3. **控制台输出**：监控`onPullDownRefresh`事件触发 4. **自定义下拉动画**： ```css /* 自定义刷新动画 */ .custom-loader { animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` #### 注意事项 1. 页面级下拉刷新需要页面高度超出屏幕高度才会生效 2. iOS和Android的下拉效果存在系统差异 3. 使用`scroll-view`时需明确设置高度（如`height: 100vh;`） 4. 避免在`onPullDownRefresh`中执行同步阻塞操作[^2] > 通过开发者工具的"编译模式"可快速测试不同设备尺寸下的表现，建议使用`rpx`单位保证响应式布局。