ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-12-19 01:02:29 +08:00
Code Issues Actions 2 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

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

@@ -5,6 +5,8 @@
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
</example-block><example-block title="带取消按钮的ActionSheet">
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
@@ -12,6 +14,8 @@
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
</example-block><example-block title="带标题的ActionSheet">
<div class="zan-row">
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
@@ -53,7 +57,8 @@ export default {
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx'
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
@@ -71,6 +76,12 @@ export default {
}
]
};
},
methods: {
handleActionClick(item) {
console.log(item);
}
}
}
</script>

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

@@ -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="handleConfirmClick">confirm</zan-button>
</example-block><example-block title="消息确认">
<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="基础用法">
<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>
</example-block><example-block title="自动轮播">
<zan-swipe :auto-play="true" @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 auto-play="" @pagechange:end="handlePageEnd">
<zan-swipe-item v-for="img in autoImages">
<img v-lazy="img" alt="">
</zan-swipe-item>
</zan-swipe>
@@ -35,6 +29,19 @@
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
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);