微信小程序中使用map组件，ios手机中点击地图上的view，会触发底下的markertap，只要底下如果有marker点的话。

这就造成了用户体验不是很好。

然后无意间我发现点击能滑动的scroll-view反而不会触发底下的markertap，就等于是一个不穿透的容器。我就在想是不是view也可以换成scroll-view，然后防止穿透点击，答案是：可以。

但是体验还是不太好，因为scroll-view会滑动，所以按钮里面的内容也会滑动，不是最佳的解决方法。于是，我就想到可以用透明的可滑动的scroll-view放在上层作为隐形按钮，下层放普通的按钮样式，这回真正的解决了ios的bug。

一、地图上覆盖的子组件代码

wxml代码

<view class="box"><swiper circular><swiper-item wx:for="{{switchArr}}"><view class="container" catchtap="switchItem" data-index="{{index}}" data-name="{{item.name}}"><view class="card"><view class="content"><view class="icon"><image src="{{item.imageUrl}}" mode="aspectFill"></image></view><view class="bt"><view class="title">{{item.name}}</view></view></view></view></view><scroll-view class="scroll-view" scroll-y="true" catchtap="switchItem" data-index="{{index}}" data-name="{{item.name}}"><view style="height:100vh;"></view></scroll-view></swiper-item></swiper><view class="cancelSwitch" style="top:{{statusHeight+3}}px" catchtap="cancelSwitch"><text>退出页面</text></view></view>

less代码

/* pages/subPack/otherAnimation/index.wxss */page {box-sizing: border-box;font-family: sans-serif;}.cancelSwitch{position: absolute;left: 40rpx;display: flex;align-items: center;justify-content: center;width: 210rpx;height: 60rpx;line-height: 60rpx;border-radius: 30rpx;color:#fff;background-color: #d94251;image{width: 35rpx;height: 30rpx;margin-left: 3rpx;}}.box{position: fixed;z-index: 10000;min-height: 100vh;background-color: #1a1c22;width: 100%;swiper {width: 100%;height: 100vh;swiper-item {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;.container {position: relative;display: flex;justify-content: space-around;align-items: center;width: 710rpx;.card {width: 100%;margin: 20px;padding: 40px 30px;border-radius: 40px;background-color: #20252a;border: 4rpx solid #ffefa1;box-shadow: -0px -0px 10px #ffefa1;.imgBx {position: relative;text-align: center;}.content {text-align: center;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;.icon {padding: 20px;margin-top: 15px;height: 100%;width: 120%;border-radius: 40px;color: #32a3b1;font-size: 16px;overflow: hidden;text-decoration: none;background: #20252a;box-shadow: 13px 13px 26px #181c20, -13px -13px 26px #282e35;image {width: 100%;border-radius: 10px;}}.bt {display: inline-block;padding: 10px 20px;margin-top: 45px;border-radius: 40px;color: #ffefa1;font-size: 16px;text-decoration: none;background: #20252a;box-shadow: 20px 20px 41px #161a1d,-20px -20px 41px #2a3037;&:hover {background: #20252a;box-shadow: inset 20px 20px 41px #161a1d,inset -20px -20px 41px #2a3037;}}}&:hover {background: #20252a;box-shadow: inset 20px 20px 41px #161a1d,inset -20px -20px 41px #2a3037;}}}.scroll-view{width: 750rpx;background-color: #fff;position:absolute;height: 1000rpx;opacity: 0;}}}}

js代码

const app = getApp();Component({data: {statusHeight: app.globalData.statusHeight,buttonCanUse:true},properties: {switchArr:{type:Array,value:[]}},methods: {switchItem(e) {if(!this.data.buttonCanUse){return}this.setData({buttonCanUse:false})this.triggerEvent('switchItem', {index:e.currentTarget.dataset.index,name:e.currentTarget.dataset.name})this.setData({buttonCanUse:true})},cancelSwitch() {this.triggerEvent('cancelSwitch')},}})

二、小程序效果

map效果：map上面有很多点位 这些点位都是可以点击进去其他页面的点

切换旅游路线的子组件：是覆盖在map之上的一个容器 z-index：10000

点击就可以切换到路线

三、问题所在

点击这个全景路线的时候 如果点击的位置下方有一个marker点，则他触发两个点击事件，即同时切换路线 同时进入marker点链接的路径

四、解决思路

利用可滑动的scroll-view不会穿透的特性，在子组件上面插入隐形scroll-view，设置点击事件，（用户以为点击的是子组件，实际上点击的是scroll-view，这是一个通用的思路），然后将scroll-view大小覆盖子组件

五、代码分析

核心代码：

<view class="container" catchtap="switchItem" data-index="{{index}}" data-name="{{item.name}}"><view class="card"><view class="content"><view class="icon"><image src="{{item.imageUrl}}" mode="aspectFill"></image></view>view class="bt"><view class="title">{{item.name}}</view></view></view></view></view> <scroll-view class="scroll-view" scroll-y="true" catchtap="switchItem" data-index="{{index}}" data-name="{{item.name}}"><view style="height:100vh;"></view></scroll-view>

.scroll-view{width: 750rpx;background-color: #fff;position:absolute;height: 1000rpx;opacity: 0;}

<view class="container" catchtap="switchItem" data-index="{{index}}" data-name="{{item.name}}">是子组件里面每个路线的容器，点击可以切换路线

我在同级写了一个scroll-view 设置宽度750rpx撑满屏幕 然后高度1000rpx盖住整个路线容器 并且将透明度改为零（即opacity:0）

然后在wxml中 设置scroll-y=“true” 在scroll-view里面放一个高度100vh的盒子，让整个scroll-view可滑动，因为scroll-y，所以是上下滑动。

这里为什么不设置scroll-x=“true” 然后在横向上滑动 是因为 我本身用了swiper组件 左右滑动切换，用scroll-x的话，两个滑动事件会冲突，会影响原有的滑动感受。然后在scroll-view上

然后在scroll-view上添加原本写在container上面的点击的点击事件，让用户点的实际上是scroll-view

这样就可以保证ios系统手机点击不会穿透了。