uni-app H5网页在微信浏览器内打开失去滑动弹性

uni-app H5网页在微信浏览器内打开失去滑动弹性

示例代码：

<view class="home-page"></view>
.home-page{
height:2000px;
}

操作步骤：

HBuilderX 建一个uni-app 工程运行H5 在微信里打开

预期结果：

上滑下拉保持弹性效果

实际结果：

上滑下拉没有弹性

bug描述：

uni-app h5网页在微信里打开，当view 的高度height 高到一定程度比如height =2000px ，那么这个页面就会失去滑动弹性，顶部和底部都没有伸缩弹性，height 小点，比如900px 就会有弹性，在Safari浏览器里反而有弹性。我换成vue 原网页就不会有这个问题。



| 信息类别       | 内容               |
|----------------|--------------------|
| 产品分类       | uniapp/H5          |
| PC开发环境     | Mac                |
| PC开发环境版本 | 11.4               |
| HBuilderX类型  | 正式               |
| HBuilderX版本  | 3.2.2              |
| 浏览器平台     | 微信内置浏览器     |
| 浏览器版本     | 8.0.10             |
| 项目创建方式   | HBuilderX          |

更多关于uni-app H5网页在微信浏览器内打开失去滑动弹性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app H5网页在微信浏览器内打开失去滑动弹性的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个微信浏览器内核的兼容性问题，uni-app在H5端默认会启用bounce弹性滚动，但在微信浏览器中，当页面内容高度超过一定阈值时，可能会触发微信自身的滚动机制，导致弹性效果失效。

解决方案：

  1. 禁用微信默认滚动： 在pages.json中配置页面样式，禁用原生滚动：

    {
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    "disableScroll": true
  }
}

  2. 使用CSS强制弹性滚动： 在App.vue或页面样式中添加：

    /* 全局样式 */
page {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

/* 或针对具体页面 */
.home-page {
  height: 2000px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

  3. 检查页面结构： 确保页面根元素没有设置overflow: hidden，这会影响滚动行为。

  4. 微信浏览器特定处理： 在onLoad生命周期中尝试重置滚动：

    onLoad() {
  // 微信环境重置滚动
  if (uni.getSystemInfoSync().platform === 'ios') {
    document.body.style.webkitOverflowScrolling = 'touch';
  }
}
回到顶部