Merge remote-tracking branch 'upstream/dev' into dev

This commit is contained in:
niunai 2017-09-26 16:55:33 +08:00
commit b632fa03c4
5 changed files with 18 additions and 35 deletions

View File

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

View File

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

View File

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

View File

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

View File

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