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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/examples-dist/actionsheet.vue
View File

@ -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>

5
docs/examples-dist/dialog.vue
View File

@ -1,6 +1,9 @@
<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>
</example-block><example-block title="消息确认">
<zan-button @click="handleConfirmClick">confirm</zan-button> <zan-button @click="handleConfirmClick">confirm</zan-button>

78
docs/examples-dist/lazyload.vue Normal file
View 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>

29
docs/examples-dist/swipe.vue
View File

@ -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
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> <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>
``` ```

3
docs/examples.js
View File

@ -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);

3
docs/index.js
View File

@ -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);

4
docs/nav.config.json
View File

@ -95,6 +95,10 @@
{ {
"path": "/image-preview", "path": "/image-preview",
"title": "ImagePreview 图片预览" "title": "ImagePreview 图片预览"
},
{
"path": "/lazyload",
"title": "Lazyload 图片懒加载"
} }
] ]
}, },

3
package.json
View File

@ -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"

82
packages/lazyload/index.js
View File

@ -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);
}
};