mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
lazyload
This commit is contained in:
cookfront
parent
c95a779d8d
commit
a6b4fe5a7b
@ -5,6 +5,8 @@
|
|||||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||||
</zan-actionsheet>
|
</zan-actionsheet>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</example-block><example-block title="带取消按钮的ActionSheet">
|
</example-block><example-block title="带取消按钮的ActionSheet">
|
||||||
<div class="zan-row">
|
<div class="zan-row">
|
||||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||||
@ -12,6 +14,8 @@
|
|||||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||||
</zan-actionsheet>
|
</zan-actionsheet>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</example-block><example-block title="带标题的ActionSheet">
|
</example-block><example-block title="带标题的ActionSheet">
|
||||||
<div class="zan-row">
|
<div class="zan-row">
|
||||||
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
|
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
|
||||||
@ -53,7 +57,8 @@ export default {
|
|||||||
actions1: [
|
actions1: [
|
||||||
{
|
{
|
||||||
name: '微信安全支付',
|
name: '微信安全支付',
|
||||||
className: 'actionsheet-wx'
|
className: 'actionsheet-wx',
|
||||||
|
callback: this.handleActionClick
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '支付宝支付',
|
name: '支付宝支付',
|
||||||
@ -71,6 +76,12 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleActionClick(item) {
|
||||||
|
console.log(item);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -1,7 +1,10 @@
|
|||||||
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
|
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="消息提示">
|
||||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||||
|
|
||||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
|
||||||
|
|
||||||
|
</example-block><example-block title="消息确认">
|
||||||
|
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
78
docs/examples-dist/lazyload.vue
Normal file
78
docs/examples-dist/lazyload.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<template><section class="demo-lazyload"><h1 class="demo-title">lazyload</h1><example-block title="基础用法">
|
||||||
|
<ul class="image-list" ref="container">
|
||||||
|
<li v-for="img in imageList">
|
||||||
|
<img class="lazy-img" v-lazy="img">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</example-block><example-block title="背景图懒加载">
|
||||||
|
<ul class="image-list" ref="container">
|
||||||
|
<li v-for="img in backgroundImageList">
|
||||||
|
<div class="lazy-background" v-lazy:background-image="img"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</example-block><example-block title="懒加载模块">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</example-block></section></template>
|
||||||
|
<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>
|
||||||
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
|
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>
|
||||||
@ -1,20 +1,14 @@
|
|||||||
<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
|
<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
|
||||||
<zan-swipe>
|
<zan-swipe>
|
||||||
<zan-swipe-item>
|
<zan-swipe-item v-for="img in images">
|
||||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
<img v-lazy="img" 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>
|
</zan-swipe-item>
|
||||||
</zan-swipe>
|
</zan-swipe>
|
||||||
|
|
||||||
</example-block><example-block title="自动轮播">
|
</example-block><example-block title="自动轮播">
|
||||||
<zan-swipe :auto-play="true" @pagechange:end="handlePageEnd">
|
<zan-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||||
<zan-swipe-item>
|
<zan-swipe-item v-for="img in autoImages">
|
||||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
<img v-lazy="img" 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>
|
</zan-swipe-item>
|
||||||
</zan-swipe>
|
</zan-swipe>
|
||||||
|
|
||||||
@ -35,6 +29,19 @@
|
|||||||
<script>
|
<script>
|
||||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||||
export default {
|
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: {
|
methods: {
|
||||||
handlePageEnd(page, index) {
|
handlePageEnd(page, index) {
|
||||||
console.log(page, index);
|
console.log(page, index);
|
||||||
|
|||||||
169
docs/examples-docs/lazyload.md
Normal file
169
docs/examples-docs/lazyload.md
Normal 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` | |
|
||||||
@ -14,6 +14,19 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
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: {
|
methods: {
|
||||||
handlePageEnd(page, index) {
|
handlePageEnd(page, index) {
|
||||||
console.log(page, index);
|
console.log(page, index);
|
||||||
@ -63,11 +76,8 @@ export default {
|
|||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<zan-swipe>
|
<zan-swipe>
|
||||||
<zan-swipe-item>
|
<zan-swipe-item v-for="img in images">
|
||||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
<img v-lazy="img" 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>
|
</zan-swipe-item>
|
||||||
</zan-swipe>
|
</zan-swipe>
|
||||||
```
|
```
|
||||||
@ -80,11 +90,8 @@ export default {
|
|||||||
:::demo 自动轮播
|
:::demo 自动轮播
|
||||||
```html
|
```html
|
||||||
<zan-swipe auto-play @pagechange:end="handlePageEnd">
|
<zan-swipe auto-play @pagechange:end="handlePageEnd">
|
||||||
<zan-swipe-item>
|
<zan-swipe-item v-for="img in autoImages">
|
||||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
<img v-lazy="img" 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>
|
</zan-swipe-item>
|
||||||
</zan-swipe>
|
</zan-swipe>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -10,6 +10,9 @@ import 'packages/zanui-css/src/index.css';
|
|||||||
import DemoList from './components/demo-list.vue';
|
import DemoList from './components/demo-list.vue';
|
||||||
|
|
||||||
Vue.use(ZanUI);
|
Vue.use(ZanUI);
|
||||||
|
Vue.use(ZanUI.Lazyload, {
|
||||||
|
lazyComponent: true
|
||||||
|
});
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
let routesConfig = routes(navConfig, true);
|
let routesConfig = routes(navConfig, true);
|
||||||
|
|||||||
@ -18,6 +18,9 @@ function isMobile() {
|
|||||||
|
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
Vue.use(ZanUI);
|
Vue.use(ZanUI);
|
||||||
|
Vue.use(ZanUI.Lazyload, {
|
||||||
|
lazyComponent: true
|
||||||
|
});
|
||||||
Vue.component('side-nav', SideNav);
|
Vue.component('side-nav', SideNav);
|
||||||
Vue.component('demo-block', DemoBlock);
|
Vue.component('demo-block', DemoBlock);
|
||||||
Vue.component('footer-nav', FooterNav);
|
Vue.component('footer-nav', FooterNav);
|
||||||
|
|||||||
@ -95,6 +95,10 @@
|
|||||||
{
|
{
|
||||||
"path": "/image-preview",
|
"path": "/image-preview",
|
||||||
"title": "ImagePreview 图片预览"
|
"title": "ImagePreview 图片预览"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/lazyload",
|
||||||
|
"title": "Lazyload 图片懒加载"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -40,7 +40,8 @@
|
|||||||
"author": "youzanfe",
|
"author": "youzanfe",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"raf.js": "0.0.4"
|
"raf.js": "0.0.4",
|
||||||
|
"vue-lazyload": "^1.0.3"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "2.1.8"
|
"vue": "2.1.8"
|
||||||
|
|||||||
@ -1,79 +1,3 @@
|
|||||||
export default {
|
import Lazyload from 'vue-lazyload';
|
||||||
install: function(Vue, options) {
|
|
||||||
options = options || { fade: false, nohori: false };
|
export default Lazyload;
|
||||||
// scroll结束的时候触发scrollend事件
|
|
||||||
var timer = null;
|
|
||||||
var topValue = 0;
|
|
||||||
var bodyEle = document.body;
|
|
||||||
var scrollEnd = document.createEvent('HTMLEvents');
|
|
||||||
scrollEnd.initEvent('scrollEnd', true, false);
|
|
||||||
function enterFrame() {
|
|
||||||
if (bodyEle.scrollTop === topValue) {
|
|
||||||
window.cancelAnimationFrame(timer);
|
|
||||||
window.dispatchEvent(scrollEnd);
|
|
||||||
} else {
|
|
||||||
topValue = bodyEle.scrollTop;
|
|
||||||
}
|
|
||||||
window.requestAnimationFrame(enterFrame);
|
|
||||||
}
|
|
||||||
document.addEventListener('scroll', function() {
|
|
||||||
if (!timer) {
|
|
||||||
timer = window.requestAnimationFrame(enterFrame);
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
// vue指令
|
|
||||||
function update(value) {
|
|
||||||
if (!value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var isFadeIn = this.modifiers.fade || options.fade;
|
|
||||||
var isNoHori = this.modifiers.nohori || options.nohori;
|
|
||||||
// 用css3来控制过渡效果
|
|
||||||
if (isFadeIn) {
|
|
||||||
this.el.style.opacity = 0;
|
|
||||||
this.el.style.transition = 'opacity .3s';
|
|
||||||
this.el.style.webkitTransition = 'opacity .3s';
|
|
||||||
}
|
|
||||||
var compute = function() {
|
|
||||||
if (this.el === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var rect = this.el.getBoundingClientRect();
|
|
||||||
var vpWidth = document.head.parentNode.clientWidth;
|
|
||||||
var vpHeight = document.head.parentNode.clientHeight;
|
|
||||||
var loadImg = function() {
|
|
||||||
this.el.src = value;
|
|
||||||
this.el.addEventListener('load', onloadEnd);
|
|
||||||
window.removeEventListener('scrollEnd', compute, true);
|
|
||||||
window.removeEventListener('resize', compute, true);
|
|
||||||
}.bind(this);
|
|
||||||
if (this.el.src === value) return;
|
|
||||||
if (isNoHori) {
|
|
||||||
if (rect.bottom >= 0 && rect.top <= vpHeight) {
|
|
||||||
loadImg();
|
|
||||||
}
|
|
||||||
} else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
|
|
||||||
loadImg();
|
|
||||||
}
|
|
||||||
}.bind(this);
|
|
||||||
var onload = function() {
|
|
||||||
compute();
|
|
||||||
this.el && this.el.removeEventListener('load', onload);
|
|
||||||
window.addEventListener('scrollEnd', compute, true);
|
|
||||||
window.addEventListener('resize', compute, true);
|
|
||||||
}.bind(this);
|
|
||||||
var onloadEnd = function() {
|
|
||||||
if (this.el === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (isFadeIn) {
|
|
||||||
this.el.style.opacity = 1;
|
|
||||||
}
|
|
||||||
this.el.removeEventListener('load', onloadEnd);
|
|
||||||
}.bind(this);
|
|
||||||
// 元素load触发事件
|
|
||||||
this.el.addEventListener('load', onload);
|
|
||||||
}
|
|
||||||
Vue.directive('lazyload', update);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user