vue2 모바일 웹 페이지 이미지 슬라이드를 터치하여 상단과 왼쪽 및 두 손가락 줌 이미지를 변경합니다.

코딩

<template>
 <div class="coach_daily">
 <div class="coach_daily-inline">
 <div style="width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 10;"
 @touchstart="startMap($event, 1)" @touchmove="moveMap($event, 1)" @touchend="endMap($event, 1)">
 <img class="coach_daily_bg" ref="contrastimg" :src="require('@/assets/image/bgc-00.png')"
 :style="{ transform: 'scale(' + store.scale + ')', top: top + 'px', left: left + 'px' }" alt="" />
 </div>
 </div>
 </div>
</template>
<script>
export default {
 data () {
 return {
 store: { //이미지 줌
 scale: 1,
 pageX: '',
 pageY: '',
 },
 top: 0,
 left: 0,
 ot: 0,
 ol: 0,
 leaderboardphb: true
 }
 },
 methods: {
 // 이미지 이동
 //터치 시작
 startMap (e, index) {
 console.log('e', e)
 this.ol = e.touches[0].clientX - this.$refs.contrastimg.offsetLeft
 this.ot = e.touches[0].clientY - this.$refs.contrastimg.offsetTop
 var touches = e.touches
 var events = touches[0]
 var events2 = touches[1]
 if (!events) {
 return
 }
 event.preventDefault()
 console.log(events.pageX)
 // 첫 번째 터치 포인트의 좌표
 this.store.pageX = events.pageX
 this.store.pageY = events.pageY
 this.store.moveable = true
 if (events2) {
 this.store.pageX2 = events2.pageX
 this.store.pageY2 = events2.pageY
 }
 this.store.originScale = this.store.scale || 1
 },
 // 
 moveMap (e, index) {
 let left = e.touches[0].clientX
 let top = e.touches[0].clientY
 this.top = top - this.ot
 this.left = left - this.ol
 e.preventDefault()
 let store = this.store
 var touches = e.touches
 var events = touches[0]
 var events2 = touches[1]
 if (events2) {
 // 두 손가락 이동
 if (!store.pageX2) {
 store.pageX2 = events2.pageX
 }
 if (!store.pageY2) {
 store.pageY2 = events2.pageY
 }
 // 사이의 좌표 가져오기 예시
 var getDistance = function (start, stop) {
 return Math.hypot(stop.x - start.x, stop.y - start.y)
 }
 var zoom = getDistance({
 x: events.pageX,
 y: events.pageY
 }, {
 x: events2.pageX,
 y: events2.pageY
 }) /
 getDistance({
 x: store.pageX,
 y: store.pageY
 }, {
 x: store.pageX2,
 y: store.pageY2
 })
 var newScale = store.originScale * zoom
 // 최대 확대/축소 제한
 if (newScale > 3) {
 newScale = 3
 }
 // 줌 값을 사용하는 것을 잊지 마세요.
 this.store.scale = newScale
 }
 },
 // 
 endMap () {
 },
 }
}
</script>
<style scoped lang="less">
.coach_daily {
 width: 100vw;
 height: 100vh;
 // height: auto;
 position: relative;
 overflow: hidden;
}
.coach_daily_bg {
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: -10;
}
.coach_daily-inline {
 width: 7.5rem;
 height: 10rem;
}
</style>

효과두 손가락 줌두 손가락 줌위의 코드를 직접 복사하여 vue2 페이지에 붙여넣고 이미지 주소를 변경하여 사용할 수 있습니다!