小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在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(); // 非地图区域则阻止默认滚动 } });