Uniapp使用地图的时候滑动上层的view地图也滑动

问题根源分析

原生组件层级 ：uniapp中的原生地图组件（如<map>）默认处于最高层级，普通视图元素无法覆盖
事件冒泡机制：触摸事件会穿透到下层组件
滚动冲突：当内容滚动到底部/顶部时继续滑动会触发父容器滚动

完整解决方案

步骤1：结构优化

html 复制代码

<template>
  <!-- 地图容器使用固定布局 -->
  <view class="map-container">
    <map 
      id="myMap" 
      style="width:100%;height:100vh" 
      :latitude="latitude" 
      :longitude="longitude"
    ></map>
  </view>

  <!-- 覆盖层使用 cover-view -->
  <cover-view 
    class="mapViewBox" 
    :style="viewStyle" 
    v-if="viewPlan"
    @touchmove.prevent.stop="noop"
    catchtouchmove
  >
    <!-- 关闭按钮使用原生组件 -->
    <cover-image 
      class="close-btn" 
      src="/static/icon/cancel.png" 
      @click="viewPlan = false"
    />

    <!-- 滚动区域隔离事件 -->
    <scroll-view 
      scroll-y 
      class="content-scroll"
      @touchstart.stop="noop"
      @touchmove.stop="noop"
    >
      <!-- 内容区域 -->
    </scroll-view>

    <!-- 底部按钮 -->
    <cover-view class="navigation">
      <button @click="mapNavigation">到这里去</button>
    </cover-view>
  </cover-view>
</template>

步骤2：样式控制

css 复制代码

/* 地图容器 */
.map-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 1; /* 确保低于覆盖层 */
}

/* 覆盖层 */
.mapViewBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* 必须高于地图层级 */
  background: #fff;
  max-height: 60vh;
  touch-action: none; /* 禁用默认滚动 */
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
  
  .content-scroll {
    height: calc(60vh - 120rpx); /* 动态高度计算 */
    overflow: hidden;
  }
}

/* 关闭按钮定位 */
.close-btn {
  position: absolute;
  top: -100rpx;
  right: 30rpx;
  width: 30rpx;
  height: 30rpx;
  z-index: 10000;
}

步骤3：事件处理

javascript 复制代码

<script setup>
// 空操作函数阻止事件冒泡
const noop = () => {};

// 动态计算样式
const viewStyle = ref({});
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  viewStyle.value = {
    width: '100%',
    maxHeight: `${systemInfo.windowHeight * 0.6}px`
  };
});
</script>

核心原理详解

层级控制

• z-index:9999 确保覆盖层在地图组件之上

• position:fixed 脱离文档流避免布局错乱

• 使用 cover-view 和 cover-image 原生组件覆盖地图
事件拦截

• @touchmove.prevent.stop：阻止默认滚动行为 + 停止事件冒泡

• catchtouchmove：小程序专用属性，捕获并终止事件传递

• touch-action:none：CSS属性禁用浏览器默认滚动处理
滚动隔离

• scroll-view 设置固定高度（calc(60vh - 120rpx)）

• 底部按钮使用绝对定位，避免占据滚动空间

• overflow:hidden 防止内容溢出导致穿透

扩展优化建议

性能优化

javascript 复制代码

// 在 onPageScroll 生命周期中阻止滚动穿透
onPageScroll(e) {
  if(this.viewPlan) return false;
}

视觉优化

css 复制代码

/* 添加渐变遮罩提示 */
.mapViewBox::after {
  content: '';
  position: absolute;
  bottom: 120rpx;
  left: 0;
  right: 0;
  height: 60rpx;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}

平台差异处理

javascript 复制代码

// 条件编译处理不同平台
// #ifdef MP-WEIXIN
viewStyle.value.maxHeight = '60vh';
// #endif

最终效果验证

覆盖层滑动时地图保持静止
滚动到底部/顶部时不会触发地图移动
点击操作正常响应无穿透
各平台（H5、小程序、APP）表现一致

通过以上方案，可有效解决uniapp地图组件与覆盖层的滚动冲突问题。如仍有异常，请检查是否使用了非原生组件实现地图功能。