uni-app 让movable-view允许自定义双指缩放

在uni-app中，movable-view 组件默认不支持双指缩放功能，但你可以通过监听触摸事件（如 touchstart、touchmove 和 touchend）来自定义实现这一功能。下面是一个简单的代码示例，展示了如何为 movable-view 添加双指缩放功能。

首先，确保你的 movable-view 组件有一个唯一的 id 或 class，以便可以精确地绑定事件处理函数。

<template>
  <view class="container">
    <movable-view
      class="movable-view"
      :direction="all"
      inertia="{{true}}"
      out-of-bounds="{{true}}"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <!-- 你的内容 -->
      <image src="/static/your-image.png" class="movable-image"></image>
    </movable-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scale: 1, // 缩放比例
      lastScale: 1, // 上一次的缩放比例
      startX: 0, startY: 0, // 起始触摸点的坐标
      lastX: 0, lastY: 0, // 上一次的触摸点坐标
      touches: [], // 存储所有触摸点
      startDistance: 0, // 起始触摸点之间的距离
      scaleFactor: 1, // 缩放因子
    };
  },
  methods: {
    handleTouchStart(e) {
      this.touches = e.touches;
      this.startX = this.touches[0].clientX;
      this.startY = this.touches[0].clientY;
      if (this.touches.length === 2) {
        this.startDistance = this.getDistance(this.touches[0], this.touches[1]);
      }
    },
    handleTouchMove(e) {
      this.touches = e.touches;
      if (this.touches.length === 2) {
        const currentDistance = this.getDistance(this.touches[0], this.touches[1]);
        this.scaleFactor = currentDistance / this.startDistance;
        this.scale *= this.scaleFactor / this.lastScale;
        this.lastScale = this.scaleFactor;
        // 应用缩放，这里需要根据你的布局调整缩放方式
        // 例如，如果movable-view内部有一个image，你可以直接设置其transform属性
        this.$refs.movableView.style.transform = `scale(${this.scale})`;
      }
    },
    handleTouchEnd() {
      // 触摸结束时重置状态
      this.lastScale = this.scale;
    },
    getDistance(touch1, touch2) {
      const dx = touch2.clientX - touch1.clientX;
      const dy = touch2.clientY - touch1.clientY;
      return Math.sqrt(dx * dx + dy * dy);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.movable-view {
  width: 300px;
  height: 300px;
  background-color: #fff;
}
.movable-image {
  width: 100%;
  height: 100%;
}
</style>

注意：上述代码示例是基于Web平台的实现，如果你需要在小程序或其他平台上运行，可能需要对事件处理函数和样式进行适当调整。此外，由于 movable-view 的内部实现可能有所不同，确保在目标平台上测试缩放功能的兼容性和稳定性。