mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 18:00:27 +08:00
Merge remote-tracking branch 'upstream/dev' into dev
This commit is contained in:
commit
b632fa03c4
@ -15,7 +15,7 @@ Waterfall.install(Vue);
|
|||||||
|
|
||||||
#### 局部注册
|
#### 局部注册
|
||||||
|
|
||||||
如果你只是想在某个组件中使用`Waterfall`,你可以在对应组件中注册`Waterfall`指令,这样只能在你注册的组件中使用`Waterfall`:
|
如果你只是想在某个组件中使用`Waterfall`,可以在对应组件中注册`Waterfall`指令,这样只能在你注册的组件中使用`Waterfall`:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Waterfall } from 'vant';
|
import { Waterfall } from 'vant';
|
||||||
@ -34,7 +34,7 @@ export default {
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [1, 2, 3, 4, 5],
|
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||||
loading: false,
|
loading: false,
|
||||||
finished: false
|
finished: false
|
||||||
};
|
};
|
||||||
@ -54,7 +54,7 @@ export default {
|
|||||||
this.list.push(lastNumber);
|
this.list.push(lastNumber);
|
||||||
}
|
}
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
}, 2000);
|
}, 200);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -67,15 +67,16 @@ export default {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.demo-waterfall {
|
.demo-waterfall {
|
||||||
.waterfall {
|
ul {
|
||||||
max-height: 360px;
|
max-height: 360px;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
border-top: 1px solid #e5e5e5;
|
border-top: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
.waterfall-item {
|
li {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
border-bottom: 1px solid #e5e5e5;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.page-desc {
|
.page-desc {
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
@ -84,38 +85,20 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
.van-loading {
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
#### 基础用法
|
#### 基础用法
|
||||||
|
使用 `v-waterfall-lower` 监听滚动到达底部,并执行相应函数。若是函数执行中需要异步加载数据,可以将 `waterfall-disabled` 指定的值置为 false,禁止 `v-waterfall-lower` 监听滚动事件
|
||||||
:::demo 基础用法
|
:::demo 基础用法
|
||||||
```html
|
```html
|
||||||
<p class="page-desc">当即将滚动到元素底部时,会自动加载更多</p>
|
<p class="page-desc">当即将滚动到元素底部时,会自动加载更多</p>
|
||||||
<div class="waterfall">
|
<ul
|
||||||
<div
|
|
||||||
v-waterfall-lower="loadMore"
|
v-waterfall-lower="loadMore"
|
||||||
waterfall-disabled="isWaterfallDisabled"
|
waterfall-disabled="isWaterfallDisabled"
|
||||||
waterfall-offset="400"
|
waterfall-offset="400">
|
||||||
>
|
<li v-for="(item, index) in list">{{ item }}</li>
|
||||||
<div
|
</ul>
|
||||||
class="waterfall-item"
|
|
||||||
v-for="(item, index) in list"
|
|
||||||
:key="index"
|
|
||||||
style="text-align: center;"
|
|
||||||
>
|
|
||||||
{{ item }}
|
|
||||||
</div>
|
|
||||||
<van-loading
|
|
||||||
v-if="loading"
|
|
||||||
:type="'circle'"
|
|
||||||
:color="'black'"
|
|
||||||
></van-loading>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant",
|
"name": "vant",
|
||||||
"version": "0.9.7",
|
"version": "0.9.8",
|
||||||
"description": "有赞vue wap组件库",
|
"description": "有赞vue wap组件库",
|
||||||
"main": "lib/vant.js",
|
"main": "lib/vant.js",
|
||||||
"style": "lib/vant-css/index.css",
|
"style": "lib/vant-css/index.css",
|
||||||
@ -41,7 +41,7 @@
|
|||||||
"component"
|
"component"
|
||||||
],
|
],
|
||||||
"author": "youzanfe",
|
"author": "youzanfe",
|
||||||
"license": "ISC",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-runtime": "6.x",
|
"babel-runtime": "6.x",
|
||||||
"vue-lazyload": "^1.1.3",
|
"vue-lazyload": "^1.1.3",
|
||||||
|
@ -53,7 +53,7 @@ import TreeSelect from './tree-select';
|
|||||||
import Uploader from './uploader';
|
import Uploader from './uploader';
|
||||||
import Waterfall from './waterfall';
|
import Waterfall from './waterfall';
|
||||||
|
|
||||||
const version = '0.9.7';
|
const version = '0.9.8';
|
||||||
const components = [
|
const components = [
|
||||||
Actionsheet,
|
Actionsheet,
|
||||||
AddressList,
|
AddressList,
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vant-css",
|
"name": "vant-css",
|
||||||
"version": "0.9.7",
|
"version": "0.9.8",
|
||||||
"description": "vant css.",
|
"description": "vant css.",
|
||||||
"main": "lib/index.css",
|
"main": "lib/index.css",
|
||||||
"style": "lib/index.css",
|
"style": "lib/index.css",
|
||||||
|
@ -42,7 +42,7 @@ function handleScrollEvent() {
|
|||||||
// 判断是否到了底
|
// 判断是否到了底
|
||||||
let needLoadMoreToLower = false;
|
let needLoadMoreToLower = false;
|
||||||
if (element === scrollEventTarget) {
|
if (element === scrollEventTarget) {
|
||||||
needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
|
needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
|
||||||
} else {
|
} else {
|
||||||
const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
|
||||||
needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
|
needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user