fix(Swipe): should render dynamic swipe item correctly (#8288)

src/swipe/index.tsx

@@ -282,7 +282,9 @@ export default createComponent({
 
       const rect = useRect(root);
 
-      active = Math.min(children.length - 1, active);
+      if (count.value) {
+        active = Math.min(count.value - 1, active);
+      }
 
       state.rect = rect;
       state.swiping = true;
@@ -430,10 +432,7 @@ export default createComponent({
       (value) => initialize(+value)
     );
 
-    watch(
+    watch(count, () => initialize(state.active));
-      () => children.length,
-      () => initialize(state.active)
-    );
 
     watch(
       () => props.autoplay,

src/swipe/test/__snapshots__/index.spec.js.snap

@@ -32,6 +32,44 @@ exports[`should not allow to drag swipe when touchable is false 1`] = `
 </div>
 `;
 
+exports[`should render dynamic SwipeItem correctly 1`] = `
+<div class="van-swipe">
+  <div style="transition-duration: 500ms; transform: translateX(0px);"
+       class="van-swipe__track"
+  >
+  </div>
+</div>
+`;
+
+exports[`should render dynamic SwipeItem correctly 2`] = `
+<div class="van-swipe">
+  <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
+       class="van-swipe__track"
+  >
+    <div class="van-swipe-item"
+         style="width: 100px;"
+    >
+      <span>
+        1
+      </span>
+    </div>
+    <div class="van-swipe-item"
+         style="width: 100px;"
+    >
+      <span>
+        2
+      </span>
+    </div>
+  </div>
+  <div class="van-swipe__indicators">
+    <i class="van-swipe__indicator van-swipe__indicator--active">
+    </i>
+    <i class="van-swipe__indicator">
+    </i>
+  </div>
+</div>
+`;
+
 exports[`should render initial swipe correctly 1`] = `
 <div class="van-swipe">
   <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"

src/swipe/test/index.spec.js

@@ -1,3 +1,4 @@
+import { ref, onMounted } from 'vue';
 import {
   mount,
   later,
@@ -296,3 +297,33 @@ test('should render swipe item correctly when using lazy-render prop and loop is
   await wrapper.setData({ active: 2 });
   expectRender([true, true, true, true]);
 });
+
+test('should render dynamic SwipeItem correctly', async () => {
+  const wrapper = mount({
+    setup() {
+      const render = ref(false);
+      onMounted(() => {
+        render.value = true;
+      });
+      return { render };
+    },
+    render() {
+      return (
+        <Swipe>
+          {this.render && [
+            <SwipeItem>
+              <span>1</span>
+            </SwipeItem>,
+            <SwipeItem>
+              <span>2</span>
+            </SwipeItem>,
+          ]}
+        </Swipe>
+      );
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});