微信小程序解决map组件设置enable-scroll='{{false}}'后在安卓手机页面不能滑动的问题

最新推荐文章于 2024-03-14 11:40:11 发布

原创最新推荐文章于 2024-03-14 11:40:11 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #map #地图组件 #安卓问题 #适配

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种解决在小程序中地图组件与滑动操作冲突的方法。通过在地图上覆盖一层透明view，使得滑动操作不会触发地图的滚动，同时保留了地图点击事件的响应。这种方法适用于需要在地图上进行点击交互的场景。

需求：如图，展示地图组件，并点击地图时可以打开地图。

主要代码：


<view class="weui_cell_bd">
      <map id='myMap' class='map' longitude='{{isLookInfo[index].roomLng}}' latitude='{{isLookInfo[index].roomLat}}' markers='{{markers}}' enable-scroll='{{false}}' ></map>
      <!--透明view 这个view是用来覆盖map组件的-->
      <view class="cover_map_view" data-roomLng="{{isLookInfo[index].roomLng}}" data-roomLat="{{isLookInfo[index].roomLat}}" bindtap="openMap"></view>
</view>

逻辑：创建一个透明的view组件覆盖在map组件上面，这样当我们在滑动map的时候其实是在透明view上面滑动，这样就解决了。后面记得要把map的点击事件放到透明view上面。

tip：不要使用cover-view哦，这个和map一样不支持滑动。