uniapp微信小程序map地图点击穿透处理

尝试了三种处理方法

  1. 使用cover-viewcover-text包裹可以实现地图上的悬浮框点击不穿透到地图上
<cover-view class="close-box" @touchstart="popupClose">
  <cover-image :src="imgUrl+'close_ico.png'"  v-show="!showPicture"/>
</cover-view>
<cover-text class="copyText" @tap="CopyboxClick(marker_cur.customData.address)">复制</cover-text>

tip:虽然微信开发者文档上这个标签被废弃了,但是在uniapp开发中,实测还是能生效的


image.png
  1. scroll-view将地图底部的盒子变成滚动盒子,在微信中滚动事件会阻止穿透
<scroll-view scrollY class="map-box-detail-content scroll-view-color">
  <view class="info-box">
    <view class="title">箱子信息</view>
    ````
  </view>
</scroll-view>
  1. 加定时器/回调,按顺序处理事件,若a事件触发了,则阻止b事件触发。但是这种方法在复杂事件中操作起来相对容易出bug。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容