blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 02:41:46 +08:00
Code Issues Projects Releases Wiki Activity

change require vue to Vue && waterfall.md (#2)

Browse Source
This commit is contained in:
Yao 2017-04-21 21:20:24 +08:00 committed by 张敏
parent 33143d6f10
commit 54f0cf7195
4 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/webpack.build.js
View File

@ -13,7 +13,7 @@ config.output = {
}; };
config.externals = { config.externals = {
vue: 'vue' vue: 'Vue'
}; };
config.plugins = [ config.plugins = [

2
build/webpack.components.js
View File

@ -7,7 +7,7 @@ delete config.devtool;
config.entry = Components; config.entry = Components;
config.externals = { config.externals = {
vue: 'vue' vue: 'Vue'
}; };
config.output = { config.output = {

30
docs/examples-dist/waterfall.vue
View File

@ -1,20 +1,34 @@
<template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法"> <template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法">
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
<div class="waterfall"> <div class="waterfall">
<div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400"> <div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
<div class="waterfall-item" v-for="item in list" style="text-align: center;"> <div class="waterfall-item" v-for="item in list" style="text-align: center;">
{{ item }} {{ item }}
</div> </div>
<div v-if="loading" style="text-align: center;"> <van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
loading
</div>
</div> </div>
</div> </div>
</example-block></section></template> </example-block></section></template>
<style> <style>
.waterfall { .waterfall {
max-height: 300px; max-height: 360px;
overflow: scroll; overflow: scroll;
border-top: 1px solid #e5e5e5;
}
.waterfall-item {
line-height: 50px;
border-bottom: 1px solid #e5e5e5;
}
.page-desc {
padding: 5px 0;
line-height: 1.4;
font-size: 14px;
text-align: center;
color: #666;
}
.van-loading {
margin: 10px auto;
} }
</style> </style>
<script> <script>
@ -42,11 +56,7 @@ export default {
this.list.push(lastNumber); this.list.push(lastNumber);
} }
this.loading = false; this.loading = false;
}, 2500); }, 2000);
},
loadMoreUpper() {
if (this.list[0] < 0) return;
this.list.unshift(-1);
} }
}, },
computed: { computed: {

33
docs/examples-docs/waterfall.md
View File

@ -54,11 +54,7 @@ export default {
this.list.push(lastNumber); this.list.push(lastNumber);
} }
this.loading = false; this.loading = false;
}, 2500); }, 2000);
},
loadMoreUpper() {
if (this.list[0] < 0) return;
this.list.unshift(-1);
} }
}, },
computed: { computed: {
@ -71,8 +67,23 @@ export default {
<style> <style>
.waterfall { .waterfall {
max-height: 300px; max-height: 360px;
overflow: scroll; overflow: scroll;
border-top: 1px solid #e5e5e5;
}
.waterfall-item {
line-height: 50px;
border-bottom: 1px solid #e5e5e5;
}
.page-desc {
padding: 5px 0;
line-height: 1.4;
font-size: 14px;
text-align: center;
color: #666;
}
.van-loading {
margin: 10px auto;
} }
</style> </style>
@ -80,10 +91,10 @@ export default {
:::demo 基础用法 :::demo 基础用法
```html ```html
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
<div class="waterfall"> <div class="waterfall">
<div <div
v-waterfall-lower="loadMore" v-waterfall-lower="loadMore"
v-waterfall-upper="loadMoreUpper"
waterfall-disabled="isWaterfallDisabled" waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400" waterfall-offset="400"
> >
@ -94,9 +105,11 @@ export default {
> >
{{ item }} {{ item }}
</div> </div>
<div v-if="loading" style="text-align: center;"> <van-loading
loading v-if="loading"
</div> :type="'circle'"
:color="'black'"
></van-loading>
</div> </div>
</div> </div>
``` ```