From 463a41db96288efd0160cfc0ecbb57dc39949c94 Mon Sep 17 00:00:00 2001
From: Sanqi <sanqi_med@163.com>
Date: Fri, 19 Jan 2024 14:30:46 +0800
Subject: [PATCH] fix: swipe bug

---
 packages/quark-react/src/type/index.ts |  2 ++
 packages/quarkd/src/swipe/index.tsx    | 22 +++++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/quark-react/src/type/index.ts b/packages/quark-react/src/type/index.ts
index a583a34b..f2f1d5a1 100644
--- a/packages/quark-react/src/type/index.ts
+++ b/packages/quark-react/src/type/index.ts
@@ -4,6 +4,8 @@ export interface baseInterface
     HTMLElement
   > {
   name?: string;
+  className?: string;
+  key?: string | number;
 }
 export type componentBaseInterface = Omit<
   baseInterface,
diff --git a/packages/quarkd/src/swipe/index.tsx b/packages/quarkd/src/swipe/index.tsx
index 8cfa3135..7f05f3bc 100644
--- a/packages/quarkd/src/swipe/index.tsx
+++ b/packages/quarkd/src/swipe/index.tsx
@@ -25,10 +25,12 @@ export interface CustomEvent {
 @customElement({ tag: "quark-swipe-item", style: swipeItemStyle })
 class QuarkSwipeItem extends QuarkElement {
   componentDidMount() {
-    const parentNode = this.parentNode as QuarkSwipe;
-    if (parentNode && parentNode.moveWidth) {
-      this.style.width = `${parentNode.moveWidth}px`;
-    }
+    requestAnimationFrame(() => {
+      const parentNode = this.parentNode as QuarkSwipe;
+      if (parentNode && parentNode.moveWidth) {
+        this.style.width = `${parentNode.moveWidth}px`;
+      }
+    });
   }
 
   render() {
@@ -91,11 +93,13 @@ class QuarkSwipe extends QuarkElement {
   timer: any = null;
 
   componentDidMount() {
-    const { offsetWidth } = this;
-    this.currentIndex = this.defaultindex;
-    this.moveWidth = offsetWidth;
-    const offset = this.getOffset();
-    this.swipeChild(offset, false);
+    requestAnimationFrame(() => {
+      const { offsetWidth } = this;
+      this.currentIndex = this.defaultindex;
+      this.moveWidth = offsetWidth;
+      const offset = this.getOffset();
+      this.swipeChild(offset, false);
+    });
   }
 
   componentWillUnmount() {