first commit

uni_modules/cowain-slide-action/components/cowain-slide-action/cowain-slide-action.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: dfh
+ * @Date: 2023-01-06 16:41:51
+ * @LastEditors: dfh
+ * @Modified By: dfh
+ * @describe: 侧滑删除
+-->
+<template>
+	<view class="card-wrap" :style="{
+      width: `calc(100% + ${slideWidth}rpx)`,
+      marginLeft: '-' + slideWidth + 'rpx',
+      transform: isTouchMove ? `translateX(0px)` : `translateX(${slideWidth}rpx)`
+    }">
+		<view class="content" @touchstart="touchStartHandle" @touchend="touchEndHande">
+			<slot name="card" />
+            <slot name="delete" />
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			slideWidth: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				touchStartX: "",
+				isTouchMove: false, //向左滑动：true,显示删除按钮
+				screenWidth: 0
+			};
+		},
+		created() {
+			const {
+				screenWidth
+			} = uni.getSystemInfoSync();
+			this.screenWidth = screenWidth;
+			console.log(screenWidth);
+			uni.$on("slide-close", () => {
+				console.log("slide-close");
+				this.isTouchMove = false;
+			});
+		},
+
+		methods: {
+			touchStartHandle(e) {
+				this.touchStartX = e.changedTouches[0].clientX;
+			},
+			touchEndHande(e) {
+				const touchStartX = this.touchStartX;
+				const touchEndX = e.changedTouches[0].clientX;
+				//向左滑动touchEndX < touchStartX
+				if (touchStartX - touchEndX > 80) {
+					uni.$emit("slide-close");
+					this.isTouchMove = true;
+				} else {
+					this.isTouchMove = false;
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="css" scoped>
+	.card-wrap {
+		position: relative;
+		box-sizing: border-box;
+        
+		transition: all 0.3s;
+	}
+
+	.content {
+		width: 100%;
+        display: flex; align-items: flex-end; justify-content: space-between;
+	}
+
+	/* 左移动 */
+	.move-left {
+		transform: translateX(0rpx);
+	}
+</style>