uni-app 小米默认浏览器 scroll-view 无法滑动

uni-app 小米默认浏览器 scroll-view 无法滑动

项目创建方式 CLI版本号
CLI 3.0.0

示例代码：

<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">  
    <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>  
    <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>  
    <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>  
</scroll-view>

操作步骤：

  • 浏览器：小米手机自带系统浏览器
  • 问题组件：scroll-view
  • 第一步：打开带有横向scroll-view组件的页面；
  • 第二步：手指拖动scroll-view，此时可正常滑动；
  • 第三步：手指从屏幕中间滑动，返回上一页，注意：不能使用侧边滑动到上一页，必须是屏幕中间向右滑动返回上一页；
  • 第四步：重新进入带有横向scroll-view组件的页面；
  • 第五步：此时项目所有的横向scroll-view都不能滑动了

后续发现，只要是带有横向scroll-view组件的项目，只要在项目中触发了屏幕滑动返回（非侧边栏滑动返回），项目中的横向scroll-view都不能滑动

预期结果：

猜测是手势冲突了，解决一下手势冲突问题

实际结果：

猜测是手势冲突了，解决一下手势冲突问题

bug描述：

横向的scorll-view无法滑动，与浏览器左滑返回冲突，官方的uniapp-web示例也能复现

https://hellouniapp.dcloud.net.cn/pages/component/view


更多关于uni-app 小米默认浏览器 scroll-view 无法滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

老哥咋解决的啊

更多关于uni-app 小米默认浏览器 scroll-view 无法滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


现在继续干uniapp，还不知道能不能复现，1年多没搞这个了

直接在body禁用了横向手势，在body上加上样式 style=“touch-action: pan-y;overflow-x: auto;” touch-action: pan-y; /* 允许垂直滚动，阻止默认的水平滑动手势 /
overflow-x: auto; / 启用横向滚动 */ 目前测试没啥问题，不知道有没有其他bug产生

进行了测试，发现使用浏览器底部自带的上一页下一页按钮后，该设置会失效，有没有更好的解决方案

在 uni-app 中，scroll-view 组件在某些情况下可能会在小米默认浏览器中出现无法滑动的问题。这通常是由于浏览器的兼容性问题或 scroll-view 的样式设置不当引起的。以下是一些可能的解决方案：

1. 检查 scroll-view 的样式

确保 scroll-view 的样式设置正确，特别是 height 和 overflow 属性。scroll-view 需要有一个明确的高度，并且 overflow 应该设置为 scroll 或 auto。

<scroll-view style="height: 300px; overflow: auto;">
  <!-- 内容 -->
</scroll-view>

2. 使用 scroll-y 或 scroll-x 属性

scroll-view 组件提供了 scroll-y 和 scroll-x 属性来启用垂直或水平滚动。确保你正确使用了这些属性。

<scroll-view scroll-y style="height: 300px;">
  <!-- 内容 -->
</scroll-view>

3. 检查 scroll-view 的内容

确保 scroll-view 内部的内容足够多，以至于需要滚动。如果内容不足以超出 scroll-view 的高度，那么滚动条将不会出现。

4. 使用 @touchmove 事件

在某些情况下，小米浏览器可能会阻止默认的滚动行为。你可以尝试手动处理 @touchmove 事件来启用滚动。

<scroll-view @touchmove="handleTouchMove" scroll-y style="height: 300px;">
  <!-- 内容 -->
</scroll-view>

methods: {
  handleTouchMove(e) {
    e.preventDefault(); // 阻止默认行为
  }
}

5. 使用 webview 替代 scroll-view

如果以上方法都无法解决问题，你可以考虑使用 webview 来替代 scroll-view，尤其是在需要复杂滚动行为的情况下。

6. 更新 uni-app 版本

确保你使用的是最新版本的 uni-app，因为新版本可能会修复一些已知的兼容性问题。

7. 使用 overflow-scrolling 属性

在某些情况下，添加 -webkit-overflow-scrolling: touch; 可以改善滚动体验。

<scroll-view style="height: 300px; overflow: auto; -webkit-overflow-scrolling: touch;">
  <!-- 内容 -->
</scroll-view>

8. 检查浏览器版本

确保小米浏览器的版本是最新的，旧版本的浏览器可能存在兼容性问题。

9. 使用 uni-app 的 page 组件

如果 scroll-view 无法正常工作，你可以尝试使用 page 组件的默认滚动行为。

<view style="height: 100vh; overflow: auto;">
  <!-- 内容 -->
</view>
回到顶部