更新记录

1.0.0（2025-07-04）

初版发布

平台兼容性

uni-app(4.05)

ZoomPanView 双指缩放单指拖动组件

一个基于uniapp的双指缩放+单指拖动组件，支持在Vue页面中使用。

功能特性

• ✅ 双指缩放：支持双指捏合缩放，缩放中心基于两指中点
• ✅ 单指拖动：缩放后支持单指拖动内容
• ✅ 边界限制：拖动时自动限制边界，防止内容超出可视区域
• ✅ 缩放范围控制：可配置最小和最大缩放比例
• ✅ 双击缩放：支持双击快速缩放/重置
• ✅ 性能优化：流畅的手势操作，兼容Android和iOS
• ✅ 响应式设计：适配不同屏幕尺寸

快速开始

1. 复制组件

将 components/zoom-pan-view/ 文件夹复制到你的项目中。

2. 引入组件

<template>
  <view>
    <zoom-pan-view>
      <!-- 你的内容 -->
      <image src="/static/logo.png" mode="aspectFit" />
    </zoom-pan-view>
  </view>
</template>

<script>
import ZoomPanView from '@/components/zoom-pan-view/zoom-pan-view.vue'

export default {
  components: {
    ZoomPanView
  }
}
</script>

3. 全局注册（可选）

在 main.js 中全局注册：

import ZoomPanView from '@/components/zoom-pan-view/zoom-pan-view.vue'

Vue.component('ZoomPanView', ZoomPanView)

Props 属性

事件

方法

通过 ref 调用组件方法：

<template>
  <zoom-pan-view ref="zoomPanView">
    <image src="/static/logo.png" mode="aspectFit" />
  </zoom-pan-view>
</template>

<script>
export default {
  methods: {
    // 重置到初始状态
    reset() {
      this.$refs.zoomPanView.reset()
    },

    // 设置缩放比例
    setScale(scale) {
      this.$refs.zoomPanView.setScale(scale)
    },

    // 获取当前状态
    getState() {
      const state = this.$refs.zoomPanView.getState()
      console.log('当前状态:', state)
    }
  }
}
</script>

使用示例

基础用法

<template>
  <view class="container">
    <zoom-pan-view class="zoom-container">
      <image 
        src="/static/logo.png" 
        mode="aspectFit" 
        class="content-image"
      />
    </zoom-pan-view>
  </view>
</template>

<script>
import ZoomPanView from '@/components/zoom-pan-view/zoom-pan-view.vue'

export default {
  components: {
    ZoomPanView
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}

.zoom-container {
  width: 100%;
  height: 100%;
}

.content-image {
  width: 100%;
  height: 100%;
}
</style>

自定义配置

<template>
  <view class="container">
    <zoom-pan-view 
      :min-scale="0.5"
      :max-scale="5"
      :initial-scale="1.5"
      :animation-duration="200"
      class="zoom-container"
    >
      <view class="content">
        <text>可缩放和拖动的文本内容</text>
        <image src="/static/logo.png" mode="aspectFit" />
      </view>
    </zoom-pan-view>
  </view>
</template>

禁用特定功能

<template>
  <view class="container">
    <!-- 只允许缩放，不允许拖动 -->
    <zoom-pan-view 
      :enable-zoom="true"
      :enable-pan="false"
      :enable-double-tap="false"
      class="zoom-container"
    >
      <image src="/static/logo.png" mode="aspectFit" />
    </zoom-pan-view>
  </view>
</template>

自定义双击缩放

<template>
  <view class="container">
    <zoom-pan-view 
      :double-tap-scale="3"
      class="zoom-container"
    >
      <image src="/static/logo.png" mode="aspectFit" />
    </zoom-pan-view>
  </view>
</template>

注意事项

1. 容器尺寸：确保父容器有明确的宽高，组件会自动获取容器尺寸
2. 内容适配：建议内容使用 aspectFit 模式以保持比例
3. 性能优化：大量内容时建议使用虚拟滚动等技术
4. 兼容性：组件已针对主流移动设备进行优化

技术实现

• 使用 touchstart、touchmove、touchend 事件处理手势
• 通过 transform 实现缩放和位移
• 动态计算边界限制防止内容溢出
• 使用 will-change 优化渲染性能

更新日志

v1.0.0

• 初始版本发布
• 支持双指缩放和单指拖动
• 支持边界限制和缩放范围控制