directive.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = _default;
  4. var _event = require("../utils/event");
  5. var _scroll = require("../utils/scroll");
  6. /* eslint-disable no-underscore-dangle */
  7. var CONTEXT = '@@Waterfall';
  8. var OFFSET = 300; // 处理滚动函数
  9. function handleScrollEvent() {
  10. var element = this.el;
  11. var scrollEventTarget = this.scrollEventTarget; // 已被禁止的滚动处理
  12. if (this.disabled) return;
  13. var targetScrollTop = (0, _scroll.getScrollTop)(scrollEventTarget);
  14. var targetVisibleHeight = (0, _scroll.getVisibleHeight)(scrollEventTarget); // 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
  15. var targetBottom = targetScrollTop + targetVisibleHeight; // 如果无元素高度,考虑为元素隐藏,直接返回
  16. if (!targetVisibleHeight) return; // 判断是否到了底
  17. var needLoadMoreToLower = false;
  18. if (element === scrollEventTarget) {
  19. needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
  20. } else {
  21. var elementBottom = (0, _scroll.getElementTop)(element) - (0, _scroll.getElementTop)(scrollEventTarget) + (0, _scroll.getVisibleHeight)(element);
  22. needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
  23. }
  24. if (needLoadMoreToLower) {
  25. this.cb.lower && this.cb.lower({
  26. target: scrollEventTarget,
  27. top: targetScrollTop
  28. });
  29. } // 判断是否到了顶
  30. var needLoadMoreToUpper = false;
  31. if (element === scrollEventTarget) {
  32. needLoadMoreToUpper = targetScrollTop < this.offset;
  33. } else {
  34. var elementTop = (0, _scroll.getElementTop)(element) - (0, _scroll.getElementTop)(scrollEventTarget);
  35. needLoadMoreToUpper = elementTop + this.offset > 0;
  36. }
  37. if (needLoadMoreToUpper) {
  38. this.cb.upper && this.cb.upper({
  39. target: scrollEventTarget,
  40. top: targetScrollTop
  41. });
  42. }
  43. } // 绑定事件到元素上
  44. // 读取基本的控制变量
  45. function doBindEvent() {
  46. var _this = this;
  47. if (this.el[CONTEXT].binded) {
  48. return;
  49. }
  50. this.el[CONTEXT].binded = true;
  51. this.scrollEventListener = handleScrollEvent.bind(this);
  52. this.scrollEventTarget = (0, _scroll.getScrollEventTarget)(this.el);
  53. var disabledExpr = this.el.getAttribute('waterfall-disabled');
  54. var disabled = false;
  55. if (disabledExpr) {
  56. this.vm.$watch(disabledExpr, function (value) {
  57. _this.disabled = value;
  58. _this.scrollEventListener();
  59. });
  60. disabled = Boolean(this.vm[disabledExpr]);
  61. }
  62. this.disabled = disabled;
  63. var offset = this.el.getAttribute('waterfall-offset');
  64. this.offset = Number(offset) || OFFSET;
  65. (0, _event.on)(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
  66. this.scrollEventListener();
  67. } // 绑定事件
  68. function startBind(el) {
  69. var context = el[CONTEXT];
  70. context.vm.$nextTick(function () {
  71. doBindEvent.call(el[CONTEXT]);
  72. });
  73. } // 确认何时绑事件监听函数
  74. function doCheckStartBind(el) {
  75. var context = el[CONTEXT];
  76. if (context.vm._isMounted) {
  77. startBind(el);
  78. } else {
  79. context.vm.$on('hook:mounted', function () {
  80. startBind(el);
  81. });
  82. }
  83. }
  84. function _default(type) {
  85. return {
  86. bind: function bind(el, binding, vnode) {
  87. if (!el[CONTEXT]) {
  88. el[CONTEXT] = {
  89. el: el,
  90. vm: vnode.context,
  91. cb: {}
  92. };
  93. }
  94. el[CONTEXT].cb[type] = binding.value;
  95. doCheckStartBind(el);
  96. },
  97. update: function update(el) {
  98. var context = el[CONTEXT];
  99. context.scrollEventListener && context.scrollEventListener();
  100. },
  101. unbind: function unbind(el) {
  102. var context = el[CONTEXT];
  103. if (context.scrollEventTarget) {
  104. (0, _event.off)(context.scrollEventTarget, 'scroll', context.scrollEventListener);
  105. }
  106. }
  107. };
  108. }