diff --git a/build/webpack.build.js b/build/webpack.build.js
index f6373d03a..8f671337b 100644
--- a/build/webpack.build.js
+++ b/build/webpack.build.js
@@ -13,7 +13,7 @@ config.output = {
 };
 
 config.externals = {
-  vue: 'vue'
+  vue: 'Vue'
 };
 
 config.plugins = [
diff --git a/build/webpack.components.js b/build/webpack.components.js
index 3d5d30f5e..358456548 100644
--- a/build/webpack.components.js
+++ b/build/webpack.components.js
@@ -7,7 +7,7 @@ delete config.devtool;
 config.entry = Components;
 
 config.externals = {
-  vue: 'vue'
+  vue: 'Vue'
 };
 
 config.output = {
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
index 1d05dcfe6..42d49522f 100644
--- a/docs/examples-dist/waterfall.vue
+++ b/docs/examples-dist/waterfall.vue
@@ -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: {
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index be6d5c87d..db9d95965 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -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>
 ```