uni-app 发行H5 app中webview跳转后，H5页面按钮点击导致滚动条被禁止（安卓机小米12S、小米10、华为P50出现此问题）

uni-app 发行H5 app中webview跳转后，H5页面按钮点击导致滚动条被禁止（安卓机小米12S、小米10、华为P50出现此问题）

示例代码：

随意写三个按钮，对应的view都超出一屏宽度就可以复现了

操作步骤：

随意写三个按钮，对应的view都超出一屏宽度就可以复现了

预期结果：

点击按钮能滑动

实际结果：

能滑动就可以了

bug描述：

uniapp 发行H5，app中webview跳转H5，在H5页面中，只要点击按钮，滚动条就被禁止了（安卓机小米12S，小米10，华为P50不行）

简单点就是H5页面中只要点击按钮，部分安卓机就不能滚动了


更多关于uni-app 发行H5 app中webview跳转后，H5页面按钮点击导致滚动条被禁止（安卓机小米12S、小米10、华为P50出现此问题）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

web-view中再套个scroll-view呗

更多关于uni-app 发行H5 app中webview跳转后，H5页面按钮点击导致滚动条被禁止（安卓机小米12S、小米10、华为P50出现此问题）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


您好，嵌套了也没用，只有部分机型有这个问题，醉了

只要页面上你点击了按钮，页面就卡住了不动了，但是你往下划一下，又可以了，郁闷

在 uni-app 中，发行 H5 应用时，如果在 WebView 中跳转后，H5 页面的按钮点击导致滚动条被禁止，这可能是由于某些 CSS 或 JavaScript 行为导致的。以下是一些可能的解决方案：

1. 检查 CSS 样式

确保没有设置 overflow: hidden 或 position: fixed 等样式，这些样式可能会导致页面无法滚动。

body, html {
  overflow: auto !important;
}

2. 检查 JavaScript 事件

确保在按钮点击事件中没有调用 preventDefault() 或 stopPropagation()，这些方法可能会阻止默认的滚动行为。

document.querySelector('button').addEventListener('click', function(event) {
  // 不要调用 event.preventDefault();
});

3. 检查 WebView 设置

在 WebView 中，可能需要调整一些设置来确保滚动条正常工作。你可以尝试在 manifest.json 中调整 WebView 的设置。

{
  "h5": {
    "router": {
      "mode": "history"
    },
    "webview": {
      "scrollEnabled": true
    }
  }
}

4. 使用 @touchmove 事件

在 H5 页面中，可以尝试监听 @touchmove 事件，确保触摸事件没有被阻止。

<div @touchmove="handleTouchMove">
  <!-- 内容 -->
</div>

methods: {
  handleTouchMove(event) {
    // 确保触摸事件没有被阻止
    event.preventDefault();
  }
}

5. 检查第三方库

如果你使用了第三方库（如某些 UI 框架），确保这些库没有在你的页面中禁用滚动条。

6. 调试和排查

使用浏览器的开发者工具（如 Chrome DevTools）来调试页面，检查是否有任何样式或脚本导致了滚动条被禁用。

7. 更新 uni-app 和相关依赖

确保你使用的是最新版本的 uni-app 和相关依赖，因为某些问题可能已经在最新版本中修复。

npm update
回到顶部