uniapp 和vue 模仿汽车之家3D滑动车的效果

<template>
	<view class="main" @touchstart="clickcar()" @touchend="enickcar()" @mousemove="move()">
		<img  src="../../static/img/1.png" alt="" id="imgid" style="width: 400px;height: 400px;"/>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				clientX:0,
				ifmove :false,
				changeX:0,
				caraid:0,
				img:1.
			}
		},
		onLoad() {
			
		},
		methods: {
			clickcar(){
				var e = event || window.event;
				console.log(e)
				
				var x = e.clientX
				 var y = e.clientY
				 // 移动端
				// var x = e.touches[0].pageX
				// var y = e.touches[0].pageY
				this.clientX = x
				this.changeX = x
				console.log('//',x,y)
			},
			enickcar(){
				console.log('+++++++++')
			},
			move(){
				var e = event || window.event;
				
				var x = e.clientX
				 var y = e.clientY
				// 移动端
				// var x = e.touches[0].pageX
				// var y = e.touches[0].pageY
				if(x < this.clientX){
					if(imgid.src.endsWith('1.png')){
						this.clientX = x
						return
						this.img--
						console.log('zuo')
					}
					// imgid.src="../../static/img/2.png"
				}else{
					if(x - this.changeX > 50){
						imgid.src="../../static/img/"+this.img+".png"
						this.changeX = x
						this.img++
					}
					console.log('you')
					// imgid.src="../../static/img/"+img+".png"
				}
				console.log('//',x,y)
			}
			
		}
	}
</script>

<style>
	.main{
			   position: relative;
			   width: 700px;
			   height: 400px;
			   border: 1 rpx solid #ccc;
			   margin: 50px auto;
	}
	.img{
			   width: 100%;
			   height: 100%;
			   user-select: none;
			   -webkit-user-drag: none;
	}
</style>