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示例也能复现
直接在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>