feat(Swipe): add lazy-render prop

src/swipe/README.md

@@ -128,20 +128,14 @@ export default {
 </van-swipe>
 
 <style>
-  .van-swipe-item {
-    background-color: #39a9ed;
-    font-size: 20px;
-    line-height: 150px;
-    text-align: center;
-  }
-  .custom-indicator {
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    padding: 2px 5px;
-    font-size: 12px;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.custom-indicator {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  padding: 2px 5px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 ```
 
@@ -176,6 +170,7 @@ export default {
 | vertical | Whether to be vertical Scrolling | *boolean* | `false` |
 | touchable | Whether to allow swipe by touch gesture | *boolean* | `true` |
 | stop-propagation `v2.1.0` | Whether to stop touchmove event propagation | *boolean* | `false` |
+| lazy-render `v2.6.0` | Whether to enable lazy render | *boolean* | `false` |
 | indicator-color | Indicator color | *string* | `#1989fa` |
 
 ### Swipe Events

src/swipe/README.zh-CN.md

@@ -134,20 +134,14 @@ export default {
 </van-swipe>
 
 <style>
-  .van-swipe-item {
-    background-color: #39a9ed;
-    font-size: 20px;
-    line-height: 150px;
-    text-align: center;
-  }
-  .custom-indicator {
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    padding: 2px 5px;
-    font-size: 12px;
-    background: rgba(0, 0, 0, 0.1);
-  }
+.custom-indicator {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  padding: 2px 5px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.1);
+}
 </style>
 ```
 
@@ -182,6 +176,7 @@ export default {
 | vertical | 是否为纵向滚动 | *boolean* | `false` |
 | touchable | 是否可以通过手势滑动 | *boolean* | `true` |
 | stop-propagation `v2.2.13` | 是否阻止滑动事件冒泡 | *boolean* | `true` |
+| lazy-render `v2.6.0` | 是否延迟渲染未展示的轮播 | *boolean* | `false` |
 | indicator-color | 指示器颜色 | *string* | `#1989fa` |
 
 ### Swipe Events

src/swipe/index.js

@@ -33,6 +33,7 @@ export default createComponent({
     height: [Number, String],
     autoplay: [Number, String],
     vertical: Boolean,
+    lazyRender: Boolean,
     indicatorColor: String,
     loop: {
       type: Boolean,
@@ -62,13 +63,13 @@ export default createComponent({
 
   data() {
     return {
-      computedWidth: 0,
-      computedHeight: 0,
       offset: 0,
       active: 0,
       deltaX: 0,
       deltaY: 0,
       swiping: false,
+      computedWidth: 0,
+      computedHeight: 0,
     };
   },
 

src/swipe/test/index.spec.js

@@ -171,3 +171,47 @@ test('should pause auto play when page hidden', async () => {
 
   expect(change).toHaveBeenCalledTimes(0);
 });
+
+test('lazy-render prop', async () => {
+  const wrapper = mount({
+    template: `
+      <van-swipe :initial-swipe="active" lazy-render>
+        <van-swipe-item><span>1</span></van-swipe-item>
+        <van-swipe-item><span>2</span></van-swipe-item>
+        <van-swipe-item><span>3</span></van-swipe-item>
+        <van-swipe-item><span>4</span></van-swipe-item>
+      </van-swipe>
+    `,
+    data() {
+      return {
+        active: 0,
+      };
+    },
+  });
+
+  await later();
+  const items = wrapper.findAll('.van-swipe-item');
+
+  expect(items.at(0).contains('span')).toBeTruthy();
+  expect(items.at(1).contains('span')).toBeTruthy();
+  expect(items.at(2).contains('span')).toBeFalsy();
+  expect(items.at(3).contains('span')).toBeTruthy();
+
+  wrapper.setData({ active: 1 });
+  expect(items.at(0).contains('span')).toBeTruthy();
+  expect(items.at(1).contains('span')).toBeTruthy();
+  expect(items.at(2).contains('span')).toBeTruthy();
+  expect(items.at(3).contains('span')).toBeFalsy();
+
+  wrapper.setData({ active: 2 });
+  expect(items.at(0).contains('span')).toBeFalsy();
+  expect(items.at(1).contains('span')).toBeTruthy();
+  expect(items.at(2).contains('span')).toBeTruthy();
+  expect(items.at(3).contains('span')).toBeTruthy();
+
+  wrapper.setData({ active: 3 });
+  expect(items.at(0).contains('span')).toBeTruthy();
+  expect(items.at(1).contains('span')).toBeFalsy();
+  expect(items.at(2).contains('span')).toBeTruthy();
+  expect(items.at(3).contains('span')).toBeTruthy();
+});