Fix waterfall hide bug (#166)

* fix: waterfall: prevent loadMore after hide

* feat: add waterfall hidden test && remove waterfall auto install

* delete useless code

packages/waterfall/directive.js

@@ -32,12 +32,16 @@ function doBindEvent() {
 function handleScrollEvent() {
   const element = this.el;
   const scrollEventTarget = this.scrollEventTarget;
-
   // 已被禁止的滚动处理
   if (this.disabled) return;
 
   const targetScrollTop = Utils.getScrollTop(scrollEventTarget);
-  const targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
+  const targetVisibleHeight = Utils.getVisibleHeight(scrollEventTarget);
+  // 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
+  const targetBottom = targetScrollTop + targetVisibleHeight;
+
+  // 如果无元素高度，考虑为元素隐藏，直接返回
+  if (!targetVisibleHeight) return;
 
   // 判断是否到了底
   let needLoadMoreToLower = false;
@@ -45,7 +49,7 @@ function handleScrollEvent() {
     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;
+    needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
   }
   if (needLoadMoreToLower) {
     this.cb['lower'] && this.cb['lower']({ target: scrollEventTarget, top: targetScrollTop });

packages/waterfall/index.js

@@ -1,14 +1,9 @@
 import Waterfall from './directive.js';
-import Vue from 'vue';
 
 const install = function(Vue) {
   Vue.directive('WaterfallLower', Waterfall('lower'));
   Vue.directive('WaterfallUpper', Waterfall('upper'));
 };
 
-if (!Vue.prototype.$isServer) {
-  Vue.use(install);
-}
-
 Waterfall.install = install;
 export default Waterfall;

test/unit/components/waterfall/waterfall-hide.vue

@@ -0,0 +1,45 @@
+<script>
+  import Waterfall from 'packages/waterfall';
+
+  export default {
+    props: {
+      disabled: Boolean,
+      list: Array,
+      onWaterfallLower: {
+        type: Function,
+        default() {
+          return function() {};
+        }
+      }
+    },
+    directives: {
+      WaterfallLower: Waterfall('lower')
+    },
+    methods: {
+      triggerWaterfallLower() {
+        this.onWaterfallLower();
+      }
+    }
+  };
+</script>
+
+<template>
+  <div
+    v-waterfall-lower="triggerWaterfallLower"
+    waterfall-disabled="disabled"
+    class="waterfall--hidden"
+  >
+    <div
+      v-for="item in list"
+      class="waterfall-item"
+    >{{ item.id }}</div>
+  </div>
+</template>
+
+<style>
+.waterfall--hidden {
+  overflow: scroll;
+  height: 100px;
+  display: none;
+}
+</style>

test/unit/get-webpack-conf.js

@@ -58,7 +58,10 @@ function getWebpackConfig(testFileName) {
         },
         {
           test: /\.(css|pcss)$/,
-          use: ['style-loader', 'css-loader', 'postcss-loader']
+          use: ['style-loader', 'css-loader', {
+            loader: 'postcss-loader',
+            options: { sourceMap: true }
+          }]
         },
         {
           test: /\.(gif|png|jpe?g)(\?\S*)?$/,
@@ -75,13 +78,16 @@ function getWebpackConfig(testFileName) {
           ]
         },
         {
-          test: /test\/unit\/components\/.*\.vue$|packages\/swipe\/.*\.vue$/,
+          test: /test\/unit\/components\/.*\.vue$|packages\/swipe.*\.vue$/,
           use: [
             {
               loader: 'vue-loader',
               options: {
                 loaders: {
-                  css: ['style-loader', 'css-loader', 'postcss-loader']
+                  css: ['style-loader', 'css-loader', {
+                    loader: 'postcss-loader',
+                    options: { sourceMap: true }
+                  }]
                 }
               }
             }
@@ -89,13 +95,16 @@ function getWebpackConfig(testFileName) {
         },
         {
           test: /packages\/.*\.vue$/,
-          exclude: /packages\/swipe\/.*\.vue$/,
+          exclude: /packages\/swipe.*\.vue$/,
           use: [
             {
               loader: 'vue-loader',
               options: {
                 loaders: {
-                  css: ['style-loader', 'css-loader', 'postcss-loader'],
+                  css: ['style-loader', 'css-loader', {
+                    loader: 'postcss-loader',
+                    options: { sourceMap: true }
+                  }],
                   js: ['isparta-loader']
                 }
               }

test/unit/specs/waterfall.spec.js

@@ -1,4 +1,5 @@
 import Waterfall from '../components/waterfall/waterfall';
+import HiddenWaterfall from '../components/waterfall/waterfall-hide';
 import { mount } from 'avoriaz';
 
 describe('Waterfall', () => {
@@ -69,4 +70,22 @@ describe('Waterfall', () => {
       done();
     }, 500);
   });
+
+  it('test waterfall function after hide', (done) => {
+    const waterfallLowerSpy = sinon.spy();
+    wrapper = mount(HiddenWaterfall, {
+      attachToDocument: true,
+      propsData: {
+        show: false,
+        disabled: false,
+        list: [{ id: 10 }],
+        onWaterfallLower: waterfallLowerSpy
+      }
+    });
+
+    setTimeout(() => {
+      expect(waterfallLowerSpy.called).to.be.false;
+      done();
+    }, 500);
+  });
 });