微信小程序中使用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系统手机点击不会穿透了。
