mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
change require vue to Vue && waterfall.md (#2)
This commit is contained in:
parent
33143d6f10
commit
54f0cf7195
@ -13,7 +13,7 @@ config.output = {
|
||||
};
|
||||
|
||||
config.externals = {
|
||||
vue: 'vue'
|
||||
vue: 'Vue'
|
||||
};
|
||||
|
||||
config.plugins = [
|
||||
|
@ -7,7 +7,7 @@ delete config.devtool;
|
||||
config.entry = Components;
|
||||
|
||||
config.externals = {
|
||||
vue: 'vue'
|
||||
vue: 'Vue'
|
||||
};
|
||||
|
||||
config.output = {
|
||||
|
@ -1,20 +1,34 @@
|
||||
<template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法">
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<p class="page-desc">当即将滚动到元素底部时,会自动加载更多</p>
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<div class="waterfall-item" v-for="item in list" style="text-align: center;">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="loading" style="text-align: center;">
|
||||
loading
|
||||
</div>
|
||||
<van-loading v-if="loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.waterfall {
|
||||
max-height: 300px;
|
||||
max-height: 360px;
|
||||
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>
|
||||
<script>
|
||||
@ -42,11 +56,7 @@ export default {
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -54,11 +54,7 @@ export default {
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -71,8 +67,23 @@ export default {
|
||||
|
||||
<style>
|
||||
.waterfall {
|
||||
max-height: 300px;
|
||||
max-height: 360px;
|
||||
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>
|
||||
|
||||
@ -80,10 +91,10 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<p class="page-desc">当即将滚动到元素底部时,会自动加载更多</p>
|
||||
<div class="waterfall">
|
||||
<div
|
||||
v-waterfall-lower="loadMore"
|
||||
v-waterfall-upper="loadMoreUpper"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
@ -94,9 +105,11 @@ export default {
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="loading" style="text-align: center;">
|
||||
loading
|
||||
</div>
|
||||
<van-loading
|
||||
v-if="loading"
|
||||
:type="'circle'"
|
||||
:color="'black'"
|
||||
></van-loading>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
Loading…
x
Reference in New Issue
Block a user