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原生手势识别机制导致的。
解决方案建议:
- 移除scroll-view包裹map组件,改为固定布局:
<view class="container">
<view class="status-bar"></view>
<view class="custom-navbar">
<!-- 导航栏内容 -->
</view>
<map class="map-content"></map>
</view>
- 如果必须保留scroll-view,可以尝试以下优化:
- 给map组件添加
@touchstart.stop
和@touchend.stop
阻止事件冒泡 - 设置scroll-view的
scroll-y="false"
禁用垂直滚动
- 使用条件编译单独处理Android平台:
<!-- #ifdef APP-ANDROID -->
<view class="map-container">
<map></map>
</view>
<!-- #endif -->
<!-- #ifndef APP-ANDROID -->
<scroll-view>
<map></map>
</scroll-view>
<!-- #endif -->