chore: add vant-waterfall package

packages/vant-waterfall/src/directive.js

@@ -0,0 +1,133 @@
+import { on, off } from './event';
+import {
+  getScrollTop,
+  getElementTop,
+  getVisibleHeight,
+  getScrollEventTarget
+} from './scroll';
+
+const CONTEXT = '@@Waterfall';
+const OFFSET = 300;
+
+// 处理滚动函数
+function handleScrollEvent() {
+  const element = this.el;
+  const { scrollEventTarget } = this;
+  // 已被禁止的滚动处理
+  if (this.disabled) return;
+
+  const targetScrollTop = getScrollTop(scrollEventTarget);
+  const targetVisibleHeight = getVisibleHeight(scrollEventTarget);
+  // 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
+  const targetBottom = targetScrollTop + targetVisibleHeight;
+
+  // 如果无元素高度，考虑为元素隐藏，直接返回
+  if (!targetVisibleHeight) return;
+
+  // 判断是否到了底
+  let needLoadMoreToLower = false;
+  if (element === scrollEventTarget) {
+    needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
+  } else {
+    const elementBottom =
+      getElementTop(element) - getElementTop(scrollEventTarget) + getVisibleHeight(element);
+    needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
+  }
+  if (needLoadMoreToLower) {
+    this.cb.lower && this.cb.lower({ target: scrollEventTarget, top: targetScrollTop });
+  }
+
+  // 判断是否到了顶
+  let needLoadMoreToUpper = false;
+  if (element === scrollEventTarget) {
+    needLoadMoreToUpper = targetScrollTop < this.offset;
+  } else {
+    const elementTop = getElementTop(element) - getElementTop(scrollEventTarget);
+    needLoadMoreToUpper = elementTop + this.offset > 0;
+  }
+  if (needLoadMoreToUpper) {
+    this.cb.upper && this.cb.upper({ target: scrollEventTarget, top: targetScrollTop });
+  }
+}
+
+// 绑定事件到元素上
+// 读取基本的控制变量
+function doBindEvent() {
+  if (this.el[CONTEXT].binded) {
+    return;
+  }
+  this.el[CONTEXT].binded = true;
+
+  this.scrollEventListener = handleScrollEvent.bind(this);
+  this.scrollEventTarget = getScrollEventTarget(this.el);
+
+  const disabledExpr = this.el.getAttribute('waterfall-disabled');
+  let disabled = false;
+  if (disabledExpr) {
+    this.vm.$watch(disabledExpr, value => {
+      this.disabled = value;
+      this.scrollEventListener();
+    });
+    disabled = Boolean(this.vm[disabledExpr]);
+  }
+  this.disabled = disabled;
+
+  const offset = this.el.getAttribute('waterfall-offset');
+  this.offset = Number(offset) || OFFSET;
+
+  on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
+
+  this.scrollEventListener();
+}
+
+// 绑定事件
+function startBind(el) {
+  const context = el[CONTEXT];
+
+  context.vm.$nextTick(() => {
+    doBindEvent.call(el[CONTEXT]);
+  });
+}
+
+// 确认何时绑事件监听函数
+function doCheckStartBind(el) {
+  const context = el[CONTEXT];
+
+  // eslint-disable-next-line no-underscore-dangle
+  if (context.vm._isMounted) {
+    startBind(el);
+  } else {
+    context.vm.$on('hook:mounted', () => {
+      startBind(el);
+    });
+  }
+}
+
+export default function (type) {
+  return {
+    bind(el, binding, vnode) {
+      if (!el[CONTEXT]) {
+        el[CONTEXT] = {
+          el,
+          vm: vnode.context,
+          cb: {}
+        };
+      }
+      el[CONTEXT].cb[type] = binding.value;
+
+      doCheckStartBind(el);
+    },
+
+    update(el) {
+      const context = el[CONTEXT];
+      context.scrollEventListener && context.scrollEventListener();
+    },
+
+    unbind(el) {
+      const context = el[CONTEXT];
+      if (context.scrollEventTarget) {
+        off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
+      }
+    }
+  };
+}

packages/vant-waterfall/src/event.js

@@ -0,0 +1,27 @@
+// eslint-disable-next-line import/no-mutable-exports
+export let supportsPassive = false;
+
+try {
+  const opts = {};
+  Object.defineProperty(opts, 'passive', {
+    // eslint-disable-next-line getter-return
+    get() {
+      /* istanbul ignore next */
+      supportsPassive = true;
+    }
+  });
+  window.addEventListener('test-passive', null, opts);
+// eslint-disable-next-line no-empty
+} catch (e) {}
+
+export function on(target, event, handler, passive = false) {
+  target.addEventListener(
+    event,
+    handler,
+    supportsPassive ? { capture: false, passive } : false
+  );
+}
+
+export function off(target, event, handler) {
+  target.removeEventListener(event, handler);
+}

packages/vant-waterfall/src/index.js

@@ -0,0 +1,8 @@
+import Waterfall from './directive';
+
+Waterfall.install = function (Vue) {
+  Vue.directive('WaterfallLower', Waterfall('lower'));
+  Vue.directive('WaterfallUpper', Waterfall('upper'));
+};
+
+export default Waterfall;

packages/vant-waterfall/src/scroll.js

@@ -0,0 +1,38 @@
+// get nearest scroll element
+// http://w3help.org/zh-cn/causes/SD9013
+// http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
+export function getScrollEventTarget(element, rootParent = window) {
+  let node = element;
+  while (
+    node &&
+    node.tagName !== 'HTML' &&
+    node.tagName !== 'BODY' &&
+    node.nodeType === 1 &&
+    node !== rootParent
+  ) {
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return rootParent;
+}
+
+export function getScrollTop(element) {
+  return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
+}
+
+// get distance from element top to page top
+export function getElementTop(element) {
+  return (
+    (element === window ? 0 : element.getBoundingClientRect().top) +
+    getScrollTop(window)
+  );
+}
+
+export function getVisibleHeight(element) {
+  return element === window
+    ? element.innerHeight
+    : element.getBoundingClientRect().height;
+}