blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Swipe): add lazy-render demo

Browse Source
This commit is contained in:
chenjiahan 2020-11-30 20:45:03 +08:00
parent cafd50c9cd
commit c96a75ac38
4 changed files with 15 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/swipe/README.md
View File

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

16
src/swipe/README.zh-CN.md
View File

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

12
src/swipe/demo/index.vue
View File

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

1
src/swipe/test/__snapshots__/demo.spec.js.snap
View File

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