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

微信小程序解决view点击事件穿透地图map触发markertap相关推荐

微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部需要回到顶部重新计算高度 onReachBottom函数被覆盖 1.配置属性问题在app.json或者本页的json文件中 ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
【微信小程序入门到精通】— 事件绑定的详细解读
目录前言一.事件绑定导论二.常用事件三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法总结前言对于目前形式,微信小程序是一 ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...

微信小程序解决view点击事件穿透地图map触发markertap