feat(Swipe): add lazy-render prop

src/swipe-item/index.js

@@ -9,19 +9,22 @@ export default createComponent({
   data() {
     return {
       offset: 0,
+      mounted: false,
     };
   },
 
+  mounted() {
+    this.$nextTick(() => {
+      this.mounted = true;
+    });
+  },
+
   computed: {
     style() {
       const style = {};
-      const { vertical, computedWidth, computedHeight } = this.parent;
+      const { size, vertical } = this.parent;
 
-      if (vertical) {
-        style.height = `${computedHeight}px`;
-      } else {
-        style.width = `${computedWidth}px`;
-      }
+      style[vertical ? 'height' : 'width'] = `${size}px`;
 
       if (this.offset) {
         style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;
@@ -29,12 +32,32 @@ export default createComponent({
 
       return style;
     },
+
+    shouldRender() {
+      const { index, parent, mounted } = this;
+
+      if (!parent.lazyRender) {
+        return true;
+      }
+
+      // wait for all item to mount, so we can get the exact count
+      if (!mounted) {
+        return false;
+      }
+
+      const active = parent.activeIndicator;
+      const maxActive = parent.count - 1;
+      const prevActive = active === 0 ? maxActive : active - 1;
+      const nextActive = active === maxActive ? 0 : active + 1;
+
+      return index === active || index === prevActive || index === nextActive;
+    },
   },
 
   render() {
     return (
       <div class={bem()} style={this.style} {...{ on: this.$listeners }}>
-        {this.slots()}
+        {this.shouldRender && this.slots()}
       </div>
     );
   },

src/swipe-item/index.less

@@ -1,6 +1,7 @@
 @import '../style/var';
 
 .van-swipe-item {
+  position: relative;
   flex-shrink: 0;
   width: 100%;
   height: 100%;

src/swipe/README.md

@@ -128,12 +128,6 @@ 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;
@@ -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,12 +134,6 @@ 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;
@@ -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();
+});