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%;