uni-app地图map组件在nvue页面中页面滚动手势与地图拖拽手势冲突

uni-app地图map组件在nvue页面中页面滚动手势与地图拖拽手势冲突

操作步骤：

  • 示例文件包含两个文件，一个是vue页面，另一个是nvue页面，分别运行就能看到结果

预期结果：

  • 在vue和nvue页面都可以正常拖拽地图

实际结果：

  • 在nvue页面中会导致地图拖拽不流畅

bug描述：

  • 页面上包含地图map组件，当页面有滚动条时，在vue页面中，拖拽地图区域不会导致页面的滚动；但是在nvue页面中会导致地图拖拽不流畅，应该是地图的拖拽手势和页面的滚动手势冲突了
开发环境 版本号 项目创建方式
Windows win10 HBuilderX
HBuilderX 3.1.6
手机系统
Android
手机系统版本号 Android 8.1
手机厂商 华为
手机机型 DUB-AL00
页面类型 nvue
打包方式 云端

更多关于uni-app地图map组件在nvue页面中页面滚动手势与地图拖拽手势冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题已记录，后续优化，已加分，感谢您的反馈！

更多关于uni-app地图map组件在nvue页面中页面滚动手势与地图拖拽手势冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX 3.1.10 alpha 已修复

这是一个已知的 nvue 地图组件手势冲突问题。在 nvue 页面中，map 组件的拖拽手势确实会与页面的滚动事件产生冲突，导致地图拖拽不流畅。

问题原因： nvue 页面的滚动容器与 vue 页面不同，其手势事件传递机制存在差异。当 map 组件放置在可滚动区域时，系统无法准确区分用户意图是拖动地图还是滚动页面。

解决方案：

  1. 使用 scroll-view 替代页面滚动
    将 map 组件放在 scroll-view 外部，确保地图区域不在滚动容器内：

    <map style="width:750rpx;height:300px"></map>
<scroll-view scroll-y style="height:500px">
  <!-- 其他内容 -->
</scroll-view>

  2. 动态控制滚动
    在地图拖拽开始/结束时，通过 @regionchange 事件动态设置页面滚动：

    onMapDragStart() {
  // 禁用页面滚动
},
onMapDragEnd() {
  // 启用页面滚动
}
回到顶部