From 1ef5cfdfb9c1a5cd950a4a480768a487e8ae92a5 Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Tue, 26 Sep 2017 15:47:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=BC=98=E5=8C=96=20&&=20wat?=
 =?UTF-8?q?erfall=20bug=E4=BF=AE=E5=A4=8D=20(#145)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/examples-docs/waterfall.md | 43 ++++++++++-----------------------
 packages/waterfall/directive.js |  2 +-
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index 268b02449..00c2e406b 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -15,7 +15,7 @@ Waterfall.install(Vue);
 
 #### 局部注册
 
-如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
+如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
 
 ```js
 import { Waterfall } from 'vant';
@@ -34,7 +34,7 @@ export default {
 export default {
   data() {
     return {
-      list: [1, 2, 3, 4, 5],
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
       loading: false,
       finished: false
     };
@@ -54,7 +54,7 @@ export default {
           this.list.push(lastNumber);
         }
         this.loading = false;
-      }, 2000);
+      }, 200);
     }
   },
   computed: {
@@ -67,15 +67,16 @@ export default {
 
 <style>
 .demo-waterfall {
-  .waterfall {
+  ul {
     max-height: 360px;
     overflow: scroll;
     border-top: 1px solid #e5e5e5;
   }
-  .waterfall-item {
+  li {
     line-height: 50px;
     border-bottom: 1px solid #e5e5e5;
     background: #fff;
+    text-align: center;
   }
   .page-desc {
     padding: 5px 0;
@@ -84,38 +85,20 @@ export default {
     text-align: center;
     color: #666;
   }
-  .van-loading {
-    margin: 10px auto;
-  }
 }
 </style>
 
 #### 基础用法
-
+使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
 :::demo 基础用法
 ```html
 <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, index) in list"
-      :key="index"
-      style="text-align: center;"
-    >
-      {{ item }}
-    </div>
-    <van-loading
-      v-if="loading"
-      :type="'circle'"
-      :color="'black'"
-    ></van-loading>
-  </div>
-</div>
+<ul
+  v-waterfall-lower="loadMore"
+  waterfall-disabled="isWaterfallDisabled"
+  waterfall-offset="400">
+  <li v-for="(item, index) in list">{{ item }}</li>
+</ul>
 ```
 :::
 
diff --git a/packages/waterfall/directive.js b/packages/waterfall/directive.js
index 220479d40..f10b536ee 100644
--- a/packages/waterfall/directive.js
+++ b/packages/waterfall/directive.js
@@ -42,7 +42,7 @@ function handleScrollEvent() {
   // 判断是否到了底
   let needLoadMoreToLower = false;
   if (element === scrollEventTarget) {
-    needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
+    needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
   } else {
     const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
     needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;