docs(Swipe): add lazy-render demo

ericyk · Nov 30, 2020 · c96a75a · c96a75a
1 parent cafd50c
commit c96a75a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 30 deletions.
diff --git a/src/swipe/README.md b/src/swipe/README.md
@@ -36,25 +36,19 @@ Use `autoplay` prop to set autoplay interval.
 </style>
 ```
 
-### Image Lazyload
+### Lazy Render
 
-Use [Lazyload](#/en-US/lazyload) component to lazyload image.
+Use `lazy-render` prop to enable lazy rendering.
 
 ```html
-<van-swipe>
-  <van-swipe-item v-for="(image, index) in images" :key="index">
-    <img v-lazy="image" />
+<van-swipe :autoplay="3000" lazy-render>
+  <van-swipe-item v-for="image in images" :key="image">
+    <img :src="image" />
   </van-swipe-item>
 </van-swipe>
 ```
 
 ```js
-import { createApp } from 'vue';
-import { Lazyload } from 'vant';
-
-const app = createApp();
-app.use(Lazyload);
-
 export default {
   data() {
     return {

diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
@@ -40,25 +40,19 @@ app.use(SwipeItem);
 </style>
 ```
 
-### 图片懒加载
+### 懒加载
 
-当 Swipe 中含有图片时，可以配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载。
+当 Swipe 中含有图片时，可以通过 `lazy-render` 属性来开启懒加载模式。在懒加载模式下，只会渲染当前页和下一页。
 
 ```html
-<van-swipe :autoplay="3000">
-  <van-swipe-item v-for="(image, index) in images" :key="index">
-    <img v-lazy="image" />
+<van-swipe :autoplay="3000" lazy-render>
+  <van-swipe-item v-for="image in images" :key="image">
+    <img :src="image" />
   </van-swipe-item>
 </van-swipe>
 ```
 
 ```js
-import { createApp } from 'vue';
-import { Lazyload } from 'vant';
-
-const app = createApp();
-app.use(Lazyload);
-
 export default {
   data() {
     return {

diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
@@ -9,11 +9,9 @@
   </demo-block>
 
   <demo-block :title="t('title2')">
-    <van-swipe :autoplay="3000">
-      <van-swipe-item v-for="(image, index) in images" :key="index">
+    <van-swipe :autoplay="3000" lazy-render>
+      <van-swipe-item v-for="image in images" :key="image">
         <img :src="image" />
-        <!-- TODO -->
-        <!-- <img v-lazy="image" /> -->
       </van-swipe-item>
     </van-swipe>
   </demo-block>
@@ -32,7 +30,7 @@
       vertical
       :autoplay="3000"
       indicator-color="white"
-      style="height: 200px;"
+      style="height: 200px"
       class="demo-swipe--vertical"
     >
       <van-swipe-item>1</van-swipe-item>
@@ -69,15 +67,15 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '图片懒加载',
+      title2: '懒加载',
       title3: '监听 change 事件',
       title4: '纵向滚动',
       title5: '自定义滑块大小',
       title6: '自定义指示器',
       message: '当前 Swipe 索引：',
     },
     'en-US': {
-      title2: 'Image Lazyload',
+      title2: 'Lazy Render',
       title3: 'Change Event',
       title4: 'Vertical Scrolling',
       title5: 'Set SwipeItem Size',

diff --git a/src/swipe/test/__snapshots__/demo.spec.js.snap b/src/swipe/test/__snapshots__/demo.spec.js.snap
@@ -59,7 +59,6 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-swipe-item"
            style="width: 100px;"
       >
-        <img src="https://img.yzcdn.cn/vant/apple-3.jpg">
       </div>
       <div class="van-swipe-item"
            style="width: 100px;"