uni-app @touchmove.stop会导致map的缩放和拖动失效，在ios系统中

uni-app @touchmove.stop会导致map的缩放和拖动失效，在ios系统中

操作步骤：

  • 地图在ios中不可以拖拽

预期结果：

  • @touchmove.stop 不会影响到子元素的操作

实际结果：

bug描述：

<template>  
  <view>  
    <swiper class="swiper">  
      <swiper-item>123</swiper-item>  
      <swiper-item [@touchmove](/user/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>

这段代码在真机ios 8.0.45版本会照成map的缩放和拖动失效。在安卓和微信开发者工具中是正常的，swiper-item的@touchmove.stop事件不会影响到map的操作


更多关于uni-app @touchmove.stop会导致map的缩放和拖动失效，在ios系统中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app @touchmove.stop会导致map的缩放和拖动失效，在ios系统中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 @touchmove.stop 事件修饰符时，确实可能会导致 map 组件的缩放和拖动功能在 iOS 系统中失效。这是因为 @touchmove.stop 阻止了事件的冒泡，导致 map 组件无法接收到 touchmove 事件，从而无法进行正常的缩放和拖动操作。

解决方案

  1. 避免在 map 组件上使用 @touchmove.stop 如果你在 map 组件或其父元素上使用了 @touchmove.stop，可以考虑移除它，或者将其应用到不影响 map 操作的元素上。

  2. 使用条件判断 如果你需要在某些条件下阻止 touchmove 事件，可以通过条件判断来控制是否阻止事件。例如：

    <template>
  <view @touchmove="handleTouchMove">
    <map :style="{ width: '100%', height: '300px' }"></map>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      if (this.shouldStopTouchMove) {
        event.stopPropagation();
      }
    }
  },
  data() {
    return {
      shouldStopTouchMove: false
    };
  }
};
</script>

    在这个例子中，handleTouchMove 方法会根据 shouldStopTouchMove 的值来决定是否阻止事件冒泡。

  3. 使用 @touchmove.capture 如果你确实需要阻止 touchmove 事件，但又不想影响 map 组件的操作，可以尝试使用 @touchmove.capture 来捕获事件，并在捕获阶段进行处理：

    <template>
  <view @touchmove.capture="handleTouchMoveCapture">
    <map :style="{ width: '100%', height: '300px' }"></map>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMoveCapture(event) {
      if (this.shouldStopTouchMove) {
        event.stopPropagation();
      }
    }
  },
  data() {
    return {
      shouldStopTouchMove: false
    };
  }
};
</script>

    这样，你可以在捕获阶段阻止事件冒泡，而不会影响 map 组件的正常操作。

  4. 使用 @touchmove.passive 如果你不需要阻止事件冒泡，只是想要监听 touchmove 事件，可以使用 @touchmove.passive 修饰符来优化性能：

    <template>
  <view @touchmove.passive="handleTouchMove">
    <map :style="{ width: '100%', height: '300px' }"></map>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      // 处理 touchmove 事件
    }
  }
};
</script>
回到顶部