Bläddra i källkod

添加 useTouch

icssoa 4 månader sedan
förälder
incheckning
3057f6366b
2 ändrade filer med 43 tillägg och 0 borttagningar
  1. 1 0
      uni_modules/cool-ui/hooks/index.ts
  2. 42 0
      uni_modules/cool-ui/hooks/touch.ts

+ 1 - 0
uni_modules/cool-ui/hooks/index.ts

@@ -2,4 +2,5 @@ export * from "./component";
 export * from "./form";
 export * from "./page";
 export * from "./size";
+export * from "./touch";
 export * from "./ui";

+ 42 - 0
uni_modules/cool-ui/hooks/touch.ts

@@ -0,0 +1,42 @@
+export class Touch {
+	// 触摸起始Y坐标
+	startY = 0;
+	// 触摸起始X坐标
+	startX = 0;
+	// 横向滑动参数
+	horizontal = 0;
+
+	start(e: UniTouchEvent) {
+		this.startX = e.touches[0].clientX;
+		this.startY = e.touches[0].clientY;
+		this.horizontal = 0;
+	}
+
+	move(e: UniTouchEvent) {
+		const x = this.startX - e.touches[0].clientX;
+
+		if (this.horizontal == 0) {
+			// 只在horizontal=0时判断一次
+			const y = this.startY - e.touches[0].clientY;
+
+			if (Math.abs(x) > Math.abs(y)) {
+				// 如果x轴移动距离大于y轴移动距离则表明是横向移动手势
+				this.horizontal = 1;
+			}
+
+			if (this.horizontal == 1) {
+				// 如果是横向移动手势,则阻止默认行为(防止页面滚动)
+				e.preventDefault();
+			}
+		}
+	}
+
+	end() {
+		this.startY = 0;
+		this.horizontal = 0;
+	}
+}
+
+export function useTouch(): Touch {
+	return new Touch();
+}