chore: add vant-waterfall package

packages/vant-waterfall/README.md

@@ -0,0 +1,86 @@
+# Waterfall 瀑布流
+
+### 安装
+
+```bash
+npm i @vant/waterfall -S
+```
+
+### 使用指南
+
+#### 全局注册
+
+```js
+import Vue from 'vue';
+import Waterfall from '@vant/waterfall';
+
+Vue.use(Waterfall);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
+
+```js
+import Waterfall from '@vant/waterfall';
+
+export default {
+  directives: {
+    WaterfallLower: Waterfall('lower'),
+    WaterfallUpper: Waterfall('upper')
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
+
+注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
+
+```html
+<ul
+  v-waterfall-lower="loadMore"
+  waterfall-disabled="disabled"
+  waterfall-offset="400"
+>
+  <li v-for="item in list">{{ item }}</li>
+</ul>
+```
+
+```js
+export default {
+  data() {
+    return {
+      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      disabled: false
+    };
+  },
+
+  directives: {
+    WaterfallLower: Waterfall('lower')
+  },
+
+  methods: {
+    loadMore() {
+      this.disabled = true;
+      setTimeout(() => {
+        for (let i = 0; i < 5; i++) {
+          this.list.push(this.list.length);
+        }
+        this.disabled = false;
+      }, 200);
+    }
+  }
+};
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
+| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
+| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
+| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |

packages/vant-waterfall/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vant/waterfall",
+  "version": "1.0.0",
+  "description": "vant waterfall component",
+  "main": "lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npx babel src --out-dir lib",
+    "release": "npm run build && npm publish"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-waterfall",
+  "dependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-transform-object-assign": "^7.2.0",
+    "@babel/preset-env": "^7.4.4"
+  }
+}

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;
+}