小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在ios中map组件外层元素添加了@touchmove.stop不可拖拽事件，导致map组件也不可缩放。如何解决这个问题，在安卓手机上正常
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
<template>
<view>
<swiper class="swiper">
<swiper-item>123</swiper-item>
<swiper-item @touchmove.stop>
<map class="map"></map>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
<style>
.swiper {
width: 100vw;
height: 100vh;
}
.map {
height: 400rpx;
</style>
1.如果您正在使用的是类似 Vue.js 或者 uni-app 这样的框架，并且使用了 @touchmove.stop.prevent 修饰符来阻止滚动，可以尝试只对不需要拖拽的特定区域应用这个事件监听器，而不是全局应用于包含地图的父容器
2.对于某些场景下，比如微信小程序中的 movable-view 组件包裹 map 组件的情况，可以通过 CSS 设置来解决，就像之前提到的知识库信息那样，为 movable-view 添加 pointer-events: auto; 来确保其不会阻止子元素的触摸事件。
3.在事件处理函数内部检查触发事件的目标元素，如果是地图组件，则不阻止默认行为，如
document.querySelector('.parent-container').addEventListener('touchmove', function(event) { if (!event.target.closest('.map-class')) { // 判断触点是否在地图组件内 event.preventDefault(); // 非地图区域则阻止默认滚动 } });
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
<template><view><swiper class="swiper"><swiper-item>123</swiper-item><swiper-item @touchmove.stop><map class="map"></map></swiper-item></swiper></view></template><script>export default {data() {return {};},methods: {},};</script><style>.swiper {width: 100vw;height: 100vh;}.map {width: 100vw;height: 400rpx;}</style>1.如果您正在使用的是类似 Vue.js 或者 uni-app 这样的框架，并且使用了 @touchmove.stop.prevent 修饰符来阻止滚动，可以尝试只对不需要拖拽的特定区域应用这个事件监听器，而不是全局应用于包含地图的父容器
2.对于某些场景下，比如微信小程序中的 movable-view 组件包裹 map 组件的情况，可以通过 CSS 设置来解决，就像之前提到的知识库信息那样，为 movable-view 添加 pointer-events: auto; 来确保其不会阻止子元素的触摸事件。
3.在事件处理函数内部检查触发事件的目标元素，如果是地图组件，则不阻止默认行为，如
document.querySelector('.parent-container').addEventListener('touchmove', function(event) { if (!event.target.closest('.map-class')) { // 判断触点是否在地图组件内 event.preventDefault(); // 非地图区域则阻止默认滚动 } });