vant components

packages/waterfall/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/waterfall/README.md

@@ -0,0 +1,26 @@
+# @youzan/waterfall
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/waterfall/index.js

@@ -0,0 +1,3 @@
+import Waterfall from './src/main.js';
+
+export default Waterfall;

packages/waterfall/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/waterfall",
+  "version": "0.0.1",
+  "description": "瀑布流",
+  "main": "./lib/index.js",
+  "author": "pangxie1991",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/waterfall/src/directive.js

@@ -0,0 +1,116 @@
+import Utils from 'src/utils/scroll.js';
+
+const CONTEXT = '@@Waterfall';
+const OFFSET = 300;
+
+// 绑定事件到元素上
+// 读取基本的控制变量
+function doBindEvent() {
+  this.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
+  this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
+
+  var disabledExpr = this.el.getAttribute('waterfall-disabled');
+  var disabled = false;
+  if (disabledExpr) {
+    this.vm.$watch(disabledExpr, (value) => {
+      this.disabled = value;
+      this.scrollEventListener();
+    });
+    disabled = Boolean(this.vm[disabledExpr]);
+  }
+  this.disabled = disabled;
+
+  var offset = this.el.getAttribute('waterfall-offset');
+  this.offset = Number(offset) || OFFSET;
+
+  this.scrollEventTarget.addEventListener('scroll', this.scrollEventListener);
+
+  this.scrollEventListener();
+}
+
+// 处理滚动函数
+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);
+
+  // 判断是否到了底
+  let needLoadMoreToLower = false;
+  if (element === scrollEventTarget) {
+    needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
+  } else {
+    const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
+    needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < 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 = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
+    needLoadMoreToUpper = elementTop + this.offset > 0;
+  }
+  if (needLoadMoreToUpper) {
+    this.cb['upper'] && this.cb['upper']({ target: scrollEventTarget, top: targetScrollTop });
+  }
+}
+
+// 绑定事件
+function startBind(el) {
+  const context = el[CONTEXT];
+
+  context.vm.$nextTick(function() {
+    if (Utils.isAttached(el)) {
+      doBindEvent.call(el[CONTEXT]);
+    }
+  });
+}
+
+// 确认何时绑事件监听函数
+function doCheckStartBind(el) {
+  const context = el[CONTEXT];
+
+  if (context.vm._isMounted) {
+    startBind(el);
+  } else {
+    context.vm.$on('hook:mounted', function() {
+      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];
+      context.scrollEventTarget && context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
+    }
+  };
+};

packages/waterfall/src/main.js

@@ -0,0 +1,14 @@
+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;