android平台在uni-app的scroll-view里面使用map缩放功能的时候缩放不顺畅和scroll-view的滚动手势事件冲突

android平台在uni-app的scroll-view里面使用map缩放功能的时候缩放不顺畅和scroll-view的滚动手势事件冲突

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

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:4.64

手机系统:Android

手机系统版本号:Android 12

手机厂商:小米

手机机型:Redmi K30S Ultra

页面类型:nvue

vue版本:vue3

打包方式:云端

项目创建方式:HBuilderX

示例代码:

<template>  
<!-- #ifdef APP -->  
<scroll-view style="flex: 1;">  
<!-- #endif -->  
<view class="status-bar"></view>  
<view class="custom-navbar">  
<view class="navbar-left">坐标拾取</view>  
<view class="navbar-title" @click="closeDialog">关闭</view>  
</view>  
<view class="map-content">  
<map id="getCoordinate"   
class="coordinate-map" :latitude="34.624977" :longitude="112.456549"   
scale="18" :show-location="true" :enable-zoom="true" @tap="clickMap"></map>
</view>  
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>  
<script setup>
const closeDialog = () => {
uni.closeDialogPage({
animationType:"slide-out-bottom"
})
}
const clickMap = () => {  
}  
</script>  
.map-content{
height: 100%;
}
.coordinate-map{
height: 100%;
width: 100%;
}
.custom-navbar {
height: 44px;
display: flex;
align-items: center;
padding: 0 10px;
background-color: #ffffff;
border-bottom: 1px solid #eeeeee;
flex-direction: row;
justify-content: space-between;
}
.status-bar{
height: var(--status-bar-height);
}

更多关于android平台在uni-app的scroll-view里面使用map缩放功能的时候缩放不顺畅和scroll-view的滚动手势事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于android平台在uni-app的scroll-view里面使用map缩放功能的时候缩放不顺畅和scroll-view的滚动手势事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的nvue页面中,Android平台下map组件与scroll-view的滚动手势确实存在冲突问题。这是由于Android原生手势识别机制导致的。

解决方案建议:

  1. 移除scroll-view包裹map组件,改为固定布局:
<view class="container">
  <view class="status-bar"></view>
  <view class="custom-navbar">
    <!-- 导航栏内容 -->
  </view>
  <map class="map-content"></map>
</view>
  1. 如果必须保留scroll-view,可以尝试以下优化:
  • 给map组件添加@touchstart.stop@touchend.stop阻止事件冒泡
  • 设置scroll-view的scroll-y="false"禁用垂直滚动
  1. 使用条件编译单独处理Android平台:
<!-- #ifdef APP-ANDROID -->
<view class="map-container">
  <map></map>
</view>
<!-- #endif -->
<!-- #ifndef APP-ANDROID -->
<scroll-view>
  <map></map>
</scroll-view>
<!-- #endif -->
回到顶部