index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports["default"] = void 0;
  5. var _utils = require("../utils");
  6. var _loading = _interopRequireDefault(require("../loading"));
  7. var _event = require("../utils/event");
  8. var _scroll = require("../utils/scroll");
  9. var _use = (0, _utils.use)('list'),
  10. sfc = _use[0],
  11. bem = _use[1],
  12. t = _use[2];
  13. var _default = sfc({
  14. model: {
  15. prop: 'loading'
  16. },
  17. props: {
  18. error: Boolean,
  19. loading: Boolean,
  20. finished: Boolean,
  21. errorText: String,
  22. loadingText: String,
  23. finishedText: String,
  24. immediateCheck: {
  25. type: Boolean,
  26. "default": true
  27. },
  28. offset: {
  29. type: Number,
  30. "default": 300
  31. },
  32. direction: {
  33. type: String,
  34. "default": 'down'
  35. }
  36. },
  37. mounted: function mounted() {
  38. this.scroller = (0, _scroll.getScrollEventTarget)(this.$el);
  39. this.handler(true);
  40. if (this.immediateCheck) {
  41. this.$nextTick(this.check);
  42. }
  43. },
  44. destroyed: function destroyed() {
  45. this.handler(false);
  46. },
  47. activated: function activated() {
  48. this.handler(true);
  49. },
  50. deactivated: function deactivated() {
  51. this.handler(false);
  52. },
  53. watch: {
  54. loading: function loading() {
  55. this.$nextTick(this.check);
  56. },
  57. finished: function finished() {
  58. this.$nextTick(this.check);
  59. }
  60. },
  61. methods: {
  62. check: function check() {
  63. if (this.loading || this.finished || this.error) {
  64. return;
  65. }
  66. var el = this.$el;
  67. var scroller = this.scroller;
  68. var scrollerHeight = (0, _scroll.getVisibleHeight)(scroller);
  69. /* istanbul ignore next */
  70. if (!scrollerHeight || window.getComputedStyle(el).display === 'none' || el.offsetParent === null) {
  71. return;
  72. }
  73. var offset = this.offset,
  74. direction = this.direction;
  75. function isReachEdge() {
  76. if (el === scroller) {
  77. var scrollTop = (0, _scroll.getScrollTop)(el);
  78. if (direction === 'up') {
  79. return scrollTop <= offset;
  80. }
  81. var targetBottom = scrollTop + scrollerHeight;
  82. return scroller.scrollHeight - targetBottom <= offset;
  83. }
  84. if (direction === 'up') {
  85. return (0, _scroll.getScrollTop)(scroller) - (0, _scroll.getElementTop)(el) <= offset;
  86. }
  87. var elBottom = (0, _scroll.getElementTop)(el) + (0, _scroll.getVisibleHeight)(el) - (0, _scroll.getElementTop)(scroller);
  88. return elBottom - scrollerHeight <= offset;
  89. }
  90. if (isReachEdge()) {
  91. this.$emit('input', true);
  92. this.$emit('load');
  93. }
  94. },
  95. clickErrorText: function clickErrorText() {
  96. this.$emit('update:error', false);
  97. this.$nextTick(this.check);
  98. },
  99. handler: function handler(bind) {
  100. /* istanbul ignore else */
  101. if (this.binded !== bind) {
  102. this.binded = bind;
  103. (bind ? _event.on : _event.off)(this.scroller, 'scroll', this.check);
  104. }
  105. }
  106. },
  107. render: function render(h) {
  108. return h("div", {
  109. "class": bem()
  110. }, [this.direction === 'down' && this.slots(), this.loading && h("div", {
  111. "class": bem('loading'),
  112. "key": "loading"
  113. }, [this.slots('loading') || [h(_loading["default"], {
  114. "class": bem('loading-icon')
  115. }), h("span", {
  116. "class": bem('loading-text')
  117. }, [this.loadingText || t('loading')])]]), this.finished && this.finishedText && h("div", {
  118. "class": bem('finished-text')
  119. }, [this.finishedText]), this.error && this.errorText && h("div", {
  120. "on": {
  121. "click": this.clickErrorText
  122. },
  123. "class": bem('error-text')
  124. }, [this.errorText]), this.direction === 'up' && this.slots()]);
  125. }
  126. });
  127. exports["default"] = _default;