简单的图片问题 主要给自己一个看的位置 ai生成，为方便查找

1. 导航条缩小效果

当用户向下滑动图片时，可以监听滑动事件，根据滑动的距离来调整导航条的高度，达到缩小的效果。可以使用touchmove事件来实现这个效果。

<template>
  <div class="container">
    <div class="nav-bar" :style="{ height: navHeight + 'px' }">导航条</div>
    <div class="image-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <img ref="image" :src="imageSrc" class="image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navHeight: 50, // 初始导航条高度
      startY: 0,
      deltaY: 0,
    };
  },
  methods: {
    onTouchStart(e) {
      this.startY = e.touches[0].pageY;
    },
    onTouchMove(e) {
      this.deltaY = e.touches[0].pageY - this.startY;
      if (this.deltaY > 0) {
        this.navHeight = Math.max(30, 50 - this.deltaY); // 根据滑动距离调整导航条高度
      }
    },
    onTouchEnd() {
      this.navHeight = 50; // 释放时恢复原始高度
    },
  },
};
</script>

<style>
.container {
  position: relative;
}
.nav-bar {
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
  transition: height 0.3s;
}
.image-container {
  margin-top: 10px;
  text-align: center;
}
.image {
  width: 100%;
  max-width: 100%;
  transition: transform 0.3s;
}
</style>

2. 双击缩放功能

可以通过监听图片的双击事件，来实现图片的缩放效果

<template>
  <!-- 上面代码省略 -->
  <div class="image-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @dblclick="onDoubleClick">
    <img ref="image" :src="imageSrc" class="image" />
  </div>
</template>

<script>
export default {
  // 上面代码省略
  methods: {
    // 上面代码省略
    onDoubleClick() {
      const image = this.$refs.image;
      if (image.style.transform === 'scale(1)') {
        image.style.transform = 'scale(2)';
      } else {
        image.style.transform = 'scale(1)';
      }
    },
  },
};
</script>

手势缩放功能是通过处理多点触控事件来实现的。具体来说，就是当用户用两个手指在屏幕上进行操作时，我们根据两个手指之间的距离变化，来动态调整图片的缩放比例。以下是对手势缩放功能的详细讲解，并在代码中添加了中文注释。

手势缩放功能的详细讲解

1. 获取两个触点之间的距离

手势缩放的核心在于计算用户的两个手指（触点）之间的距离，并根据距离的变化调整缩放比例。距离的计算可以使用勾股定理：

distance=(Δx)2+(Δy)2\text{distance} = \sqrt{(\Delta x)^2 + (\Delta y)^2}distance=(Δx)2+(Δy)2​

其中，Δx\Delta xΔx 和 Δy\Delta yΔy 分别是两个触点的 x 轴和 y 轴上的距离差。

2. 监听触摸事件

我们需要监听 touchstart、touchmove 和 touchend 事件：

• touchstart：当用户开始触摸屏幕时，如果有两个触点，我们记录下它们的初始距离。
• touchmove：当用户移动触点时，我们计算当前触点的距离，并与初始距离进行比较，从而确定当前的缩放比例。
• touchend：当用户结束触摸时，如果不再有两个触点，则结束缩放操作

<template>
  <div class="container">
    <!-- 导航条区域 -->
    <div class="nav-bar" :style="{ height: navHeight + 'px' }">导航条</div>
    <!-- 图片展示区域 -->
    <div class="image-container" 
         @touchstart="onTouchStart" 
         @touchmove="onTouchMove" 
         @touchend="onTouchEnd" 
         @dblclick="onDoubleClick">
      <img ref="image" :src="imageSrc" class="image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navHeight: 50, // 导航条的初始高度
      startY: 0, // 触摸开始的Y坐标
      deltaY: 0, // Y坐标变化值
      baseScale: 1, // 基础缩放比例
      currentScale: 1, // 当前缩放比例
      isScaling: false, // 是否正在缩放
      startDistance: 0, // 开始时两个触点之间的距离
    };
  },
  methods: {
    // 触摸开始事件处理
    onTouchStart(e) {
      if (e.touches.length > 1) { // 判断是否有两个触点
        this.isScaling = true; // 开启缩放模式
        this.startDistance = this.getDistance(e.touches); // 计算两个触点之间的初始距离
        this.baseScale = this.currentScale; // 记录当前的缩放比例
      } else {
        this.startY = e.touches[0].pageY; // 记录单触点的Y坐标
      }
    },
    // 触摸移动事件处理
    onTouchMove(e) {
      if (this.isScaling && e.touches.length > 1) { // 如果正在缩放且有两个触点
        const currentDistance = this.getDistance(e.touches); // 计算当前两个触点之间的距离
        const scale = (currentDistance / this.startDistance) * this.baseScale; // 计算新的缩放比例
        this.currentScale = Math.min(Math.max(1, scale), 3); // 限制缩放比例在1到3倍之间
        this.$refs.image.style.transform = `scale(${this.currentScale})`; // 应用新的缩放比例
      }
    },
    // 触摸结束事件处理
    onTouchEnd(e) {
      if (this.isScaling && e.touches.length < 2) { // 如果不再有两个触点
        this.isScaling = false; // 结束缩放模式
      }
    },
    // 计算两个触点之间的距离
    getDistance(touches) {
      const dx = touches[0].pageX - touches[1].pageX; // 计算X轴上的距离差
      const dy = touches[0].pageY - touches[1].pageY; // 计算Y轴上的距离差
      return Math.sqrt(dx * dx + dy * dy); // 使用勾股定理计算触点之间的距离
    },
    // 图片双击缩放事件处理
    onDoubleClick() {
      const image = this.$refs.image;
      if (image.style.transform === 'scale(1)') {
        image.style.transform = 'scale(2)';
      } else {
        image.style.transform = 'scale(1)';
      }
    },
  },
};
</script>

<style>
.container {
  position: relative;
}
.nav-bar {
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
  transition: height 0.3s;
}
.image-container {
  margin-top: 10px;
  text-align: center;
}
.image {
  width: 100%;
  max-width: 100%;
  transition: transform 0.3s;
}
</style>