uni-app scroll-view在鸿蒙HarmonyOS系统中滑动出现异常

开发环境	版本号	项目创建方式
Windows	20H2	HBuilderX

## 示例代码：


<scroll-view scroll-y style="height: 800rpx;">  
    <view v-for="(item,index) in 100" :key="index">  
        {{item}}  
    </view>  
</scroll-view>

操作步骤：

鸿蒙HarmonyOS在pages.json中设置"bounce": "none"编译后滑动scroll-view组件，scroll-view不能滑动。
鸿蒙HarmonyOS在不设置"bounce": “none”（有页面回弹）的情况下，首次滑动scroll-view会先触发页面级回弹能不滑动scroll-view组件。

预期结果：

鸿蒙HarmonyOS在pages.json中设置"bounce": "none"后scroll-view可以滑动。
鸿蒙HarmonyOS在不设置"bounce": “none”（有页面回弹）的情况下，滑动scroll-view不应该触发页面级回弹效果。

实际结果：

鸿蒙HarmonyOS在pages.json中设置"bounce": "none"后scroll-view不能滑动。
鸿蒙HarmonyOS在不设置"bounce": “none”（有页面回弹）的情况下，滑动scroll-view先触发了页面级页面回弹效果，scroll-view组件不能滑动，只有触发完页面级回弹后第二次才能滑动scroll-view。

bug描述：

在pages.json中设置取消页面回弹（“bounce”: “none”）效果后，android端不能滑动。

“pages”: [
{
“path”: “pages/index/index”,
“style”: {
“navigationBarTitleText”: “uni-app”,
“app-plus”: {
“bounce”: “none”
}
}
}
]


- 在不设置取消页面回弹的情况下，在scroll-view中向上滑动时，首次先触发的是页面回弹效果且scroll-view组件并不能滑动，只有在触发了页面级回弹后才能再次去滑动scroll-view组件。

"pages": [  
    {  
        "path": "pages/index/index",  
        "style": {  
            "navigationBarTitleText": "uni-app",  
            "app-plus": {  
                // "bounce": "none" //取消回弹测试  
            }  
        }  
    }  
]

上诉情况均在鸿蒙HarmonyOS端出现，ios、android及其他端测试均正常。
vue2与vue3均存在这样的情况。
已上传测试工程附件。

更多关于uni-app scroll-view在鸿蒙HarmonyOS系统中滑动出现异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 1楼•10 天前

确认是鸿蒙系统的问题, 暂时你可以再scroll-view下放个组件来解决此问题,例如添加一个button，
<template>
<view class="content">
<scroll-view scroll-y style=“height: 800rpx;” @touchmove=“handleClick”>
<view v-for="(item,index) in 100" :key="index" >
第 {{item}} 个元素
</view>

    </scroll-view>  
    <button type="default">hahahhaha</button>  
</view>

</template>

更多关于uni-app scroll-view在鸿蒙HarmonyOS系统中滑动出现异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼•10 天前

感谢官方的回复。虽然scroll-view下放个组件暂时可以解决（自定义组件不行，需要是官方的组件，官方组件也是只有小部分，例如button,image）。但这只是示例临时方案，在开发过程大概率是不会这样去使用的，这样开发的局限性有些大。希望官方能尽快修复这个问题。

gougou168 3楼•10 天前

在鸿蒙（HarmonyOS）系统中，uni-app 的 scroll-view 组件可能会出现滑动异常的情况。这通常是由于鸿蒙系统与 uni-app 的兼容性问题导致的。以下是一些可能的解决方案和排查步骤：

1. 检查 `scroll-view` 的属性和样式

确保 scroll-view 的属性和样式设置正确，特别是 scroll-y 和 scroll-x 属性，以及 height 和 width 样式。

<scroll-view scroll-y="true" style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>

2. 使用 `enable-flex` 属性

在鸿蒙系统中，scroll-view 可能需要启用 enable-flex 属性来支持 Flex 布局。

<scroll-view scroll-y="true" enable-flex="true" style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>

3. 检查 CSS 样式

确保 scroll-view 及其子元素的 CSS 样式没有冲突或异常。特别是 overflow 和 position 属性。

scroll-view {
  overflow: hidden;
  position: relative;
}

4. 使用 `@touchmove` 事件

如果滑动仍然异常，可以尝试使用 @touchmove 事件来手动处理滑动逻辑。

<scroll-view scroll-y="true" @touchmove="handleTouchMove" style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>

methods: {
  handleTouchMove(event) {
    // 手动处理滑动逻辑
  }
}

5. 更新 `uni-app` 版本

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

npm update @dcloudio/uni-app

6. 使用原生组件

如果问题仍然存在，可以考虑使用鸿蒙系统的原生组件来代替 scroll-view，或者使用 web-view 嵌入一个网页来实现滑动效果。

7. 反馈给开发者社区

如果以上方法都无法解决问题，建议将问题反馈给 uni-app 的开发者社区或鸿蒙系统的开发者社区，寻求官方支持。

8. 使用 `scroll-view` 的替代方案

如果 scroll-view 在鸿蒙系统中确实存在兼容性问题，可以考虑使用其他组件或自定义组件来实现类似的功能。

9. 检查鸿蒙系统版本

确保你的鸿蒙系统版本是最新的，因为系统更新可能会修复一些兼容性问题。

10. 使用 `scroll-view` 的 `scroll-top` 和 `scroll-left` 属性

如果滑动位置异常，可以尝试使用 scroll-top 和 scroll-left 属性来手动设置滚动位置。

<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>

data() {
  return {
    scrollTop: 0
  }
},
methods: {
  scrollToTop() {
    this.scrollTop = 0;
  }
}