ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

lazyload

Browse Source
This commit is contained in:
cookfront
2017-04-05 14:34:32 +08:00
parent c95a779d8d
commit a6b4fe5a7b
11 changed files with 314 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
docs/examples-docs/lazyload.md Normal file
View File

@@ -0,0 +1,169 @@
<style>
@component-namespace demo {
@b lazyload {
.lazy-img {
display: block;
width: 100%;
height: auto;
}
.lazy-background {
height: 300px;
background-size: cover;
background-repeat: no-repeat;
}
}
}
</style>
<script>
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
],
backgroundImageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
],
componentImageList: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handleComponentShow() {
console.log('component show');
}
}
}
</script>
## Lazyload 图片懒加载
### 使用指南
`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
```js
import Vue from 'vue';
import { Lazyload } from '@youzan/zanui-vue';
Vue.use(Lazyload, options);
```
### 代码演示
#### 基础用法
比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。
:::demo 基础用法
```html
<ul class="image-list" ref="container">
<li v-for="img in imageList">
<img class="lazy-img" v-lazy="img">
</li>
</ul>
<script>
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
]
};
}
}
</script>
```
:::
#### 背景图懒加载
和图片懒加载不同的背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。
:::demo 背景图懒加载
```html
<ul class="image-list" ref="container">
<li v-for="img in backgroundImageList">
<div class="lazy-background" v-lazy:background-image="img"></div>
</li>
</ul>
<script>
export default {
data() {
return {
backgroundImageList: [
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
]
};
}
}
</script>
```
:::
#### 懒加载模块
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
:::demo 懒加载模块
```html
<lazy-component @show="handleComponentShow">
<ul class="image-list">
<li v-for="img in componentImageList">
<img class="lazy-img" v-lazy="img">
</li>
</ul>
</lazy-component>
<script>
export default {
data() {
return {
componentImageList: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handleComponentShow() {
console.log('component show');
}
}
}
</script>
```
:::
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| loading | 加载时的图片 | `string` | | |
| error | 错误时的图片 | `string` | | |
| preload | 预加载高度的比例 | `string` | | |
| attempt | 尝试次数 | `number` | `3` | |
| listenEvents | 监听的事件 | `Array` | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` | |
| adapter | 适配器 | `Object` | | |
| filter | 图片url过滤 | `Object` | | |
| lazyComponent | 是否能懒加载模块 | `boolean` | `false` | |

27
docs/examples-docs/swipe.md
View File

@@ -14,6 +14,19 @@
<script>
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
],
images: [
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]
};
},
methods: {
handlePageEnd(page, index) {
console.log(page, index);
@@ -63,11 +76,8 @@ export default {
:::demo 基础用法
```html
<zan-swipe>
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item>
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
<zan-swipe-item v-for="img in images">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
```
@@ -80,11 +90,8 @@ export default {
:::demo 自动轮播
```html
<zan-swipe auto-play @pagechange:end="handlePageEnd">
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
</zan-swipe-item>
<zan-swipe-item>
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
<zan-swipe-item v-for="img in autoImages">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
```