</view>
<view class="wrap" style="">
遮照层
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [{
latitude: 39.9085,
longitude: 116.39747,
// #ifdef APP-PLUS
iconPath: '../../../static/app-plus/location@3x.png',
// #endif
// #ifndef APP-PLUS
iconPath: '../../../static/location.png',
// #endif
}, {
latitude: 39.90,
longitude: 116.39,
// #ifdef APP-PLUS
iconPath: '../../../static/app-plus/location@3x.png',
// #endif
// #ifndef APP-PLUS
iconPath: '../../../static/location.png',
// #endif
}]
}
},
methods: {
markertap() {
console.log('我触发了')
}
}
}
</script>
<style>
map {
width: 100%;
height: 100vh;
}
.wrap {
position: absolute;
bottom: 0;
width: 100%;
height: 400rpx;
background: #0062CC;
opacity: 0.6;
}
</style>
- 发布:2020-11-22 12:10
- 更新:2020-12-03 16:12
- 阅读:1376
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10或者mac
HBuilderX类型: 正式
HBuilderX版本号: 2.9.8
第三方开发者工具版本号: 1.0.3
基础库版本号: 最新都hello
项目创建方式: HBuilderX
示例代码:
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view>
<map :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap">
</map>
操作步骤:
官方hello项目。地图中触发markertap 事件,事件触发。将地图icon移动到遮照层下面。点击遮照层下面有icon的地方,依然触发markertap事件。另手指滑动遮照层。地图移动
官方hello项目。地图中触发markertap 事件,事件触发。将地图icon移动到遮照层下面。点击遮照层下面有icon的地方,依然触发markertap事件。另手指滑动遮照层。地图移动
预期结果:
点击遮照层,下面到icon。也就是markertap事件不应该触发。
点击遮照层,下面到icon。也就是markertap事件不应该触发。
实际结果:
markertap事件触发。
markertap事件触发。
临时解决方案:在遮罩层加个事件拦截一下
-
8***@qq.com (作者)
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view>
<map :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap">
</map>
</view>
<view class="wrap" @click="wrap">
遮照层
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [{
latitude: 39.9085,
longitude: 116.39747,
// #ifdef APP-PLUS
iconPath: '../../../static/app-plus/location@3x.png',
// #endif
// #ifndef APP-PLUS
iconPath: '../../../static/location.png',
// #endif
}, {
latitude: 39.90,
longitude: 116.39,
// #ifdef APP-PLUS
iconPath: '../../../static/app-plus/location@3x.png',
// #endif
// #ifndef APP-PLUS
iconPath: '../../../static/location.png',
// #endif
}]
}
},
methods: {
wrap(e) {
console.log(e)
e.stopPropagation()
e.stopPropagation()
},
markertap() {
console.log('我触发了')
}
}
}
</script>
<style>
map {
width: 100%;
height: 100vh;
}
.wrap {
position: absolute;
bottom: 0;
width: 100%;
height: 400rpx;
background: #0062CC;
opacity: 0.6;
}
</style>
给遮罩层添加@click 事件。事件中e.stopPropagation() e.stopPropagation() 。 是这个意思吗?如果是。那不行。阻塞不了。谢谢
2020-11-23 15:46
-
8***@qq.com (作者)
回复 DCloud_UNI_Anne: 确定吗?我实测不行。并且遮罩层事件会后执行。
methods: {
wrap(e) {
e.stopPropagation()
e.preventDefault()
console.log('我是遮罩层事件')
},
markertap() {
console.log('我触发了')
}
}
结果 :
我触发了
我是遮罩层事件
hx 2.9.8.20201110 小程序工具:1.03.2011202. 手机:x 14.2系统。
当也不是特别急。不行坐等更新吧。谢谢
2020-11-23 19:23
8***@qq.com (作者) - 个人开发者
demo已上传
DCloud_UNI_GSQ
需要反馈到微信小程序社区,请微信小程序的开发人员修复。
2020-12-03 16:12