1,给组件绑定事件,主要利用组件的触摸开始和触摸结束事件来实现:

<view  @touchstart="touchStart" @touchend="touchEnd">

2,声明初始化点击位置变量startX

data() {
		return {
			list:[],
			pageNum:1,
			pageSize:10,

			//初始化点击位置的x坐标
			startX:0,
		}
	},

3,利用开始触摸和结束触摸的位置的x坐标来判断是左滑还是右滑。

    /**
		* 触摸开始
		* @param {Object} e
		*/
	   touchStart: function (e) {
			if (e.touches.length == 1) {
				//设置触摸起始点水平方向位置
				this.startX=e.touches[0].clientX;
			}
		},
		/**
		 * 触摸结束
		 * @param {Object} e
		 */
		touchEnd: function (e) {
			if (e.changedTouches.length == 1) {
				//手指移动结束后水平位置
				var endX = e.changedTouches[0].clientX;
				let diff = endX-this.startX;
				if(Math.abs(diff)>20){
					if(diff>0){
						console.log("左滑...");
						
					}else{
						console.log("右滑...");
					}
				}
			}
		
		},

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐