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>