获取clientX和clientY 2020-06-27 12:01:05

视图

<template>
	<view>
        <view class="quanping" @touchstart="startMove" @touchend="endMove">
            <video class="videoo" :src="tvLink" controls="true" :poster="tvImg" autoplay="true">
            </video>	
        </view>
	</view>
</template>

js

methods: {
    startMove (e) {
        this.startData.clientX=e.changedTouches[0].clientX;
        this.startData.clientY=e.changedTouches[0].clientY;
        //console.log('点击:'+this.startData.clientX)
    },
    endMove (e) {
         //console.log('抬起手指:'+e.changedTouches[0].clientX) 
         const subX=e.changedTouches[0].clientX - this.startData.clientX;	// 抬起时的坐标-点击时的坐标
        const subY=e.changedTouches[0].clientY - this.startData.clientY;	// 抬起时的坐标-点击时的坐标
        
        if(subX > 50){
        	console.log('左滑')
        }
        if(subX < -50){
        	console.log('右滑')
        }
        if(subY > 50){
        	console.log('上滑')
        }
        if(subY < -50){
        	console.log('下滑')
        }
    }
}
  1. Laravel5.7
  2. 微信相关
  3. Mysql
  4. 前端开发
  5. 随记
  6. 写作素材
  7. 开发工具
  8. 互联网