lovelylw-reach-bottom/index.js

滑到底部加载更多的功能

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  install: function install(Vue) {
    // 上滑加载的全局指令
    Vue.directive('reach-bottom', {
      bind: function bind(el, binding, vnode, oldVnode) {
        var scrollReduce = binding.arg || 300;

        var windowHeight = window.screen.height;
        var height = void 0;
        var setTop = void 0;
        var paddingBottom = void 0;
        var marginBottom = void 0;
        // let requestFram
        var scrollEl = void 0;
        var heightEl = void 0;
        var scrollType = el.attributes.type && el.attributes.type.value;
        var touchmoveFlag = false;
        // console.log('scrollType', scrollType)
        // let scrollReduce = 20
        var pageYS = 0;
        var pageYE = 0;
        if (scrollType == 2) {
          scrollEl = el;
          heightEl = el.children[0];
        } else {
          scrollEl = document.body;
          heightEl = el;
        }

        el.addEventListener('touchstart', function (e) {
          pageYS = e.touches[0].pageY;
          //   oldScrollTop = scrollEl.scrollTop
          height = heightEl.clientHeight;
          //   if (scrollType == 2) {
          //     height = height
          //   }
          setTop = el.offsetTop;
          paddingBottom = getStyle(el, 'paddingBottom');
          marginBottom = getStyle(el, 'marginBottom');
        }, false);
        el.addEventListener('touchmove', function (e) {
          pageYE = e.touches[0].pageY;
          if (Math.abs(pageYE - pageYS) > 2) {
            touchmoveFlag = true;
          }
        }, false);

        el.addEventListener('touchend', function (e) {
          // if (Math.abs(pageYE - pageYS) > 2) {
          if (touchmoveFlag) {
            height = heightEl.clientHeight;
            touchmoveFlag = false;
            loadMore();
          }
        }, false);
        /**
         * 获取style样式
         */
        var getStyle = function getStyle(element, attr) {
          var NumberMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'int';

          var target = void 0;
          // scrollTop 获取方式不同，没有它不属于style，而且只有document.body才能用
          if (attr === 'scrollTop') {
            target = element.scrollTop;
          } else if (element.currentStyle) {
            target = element.currentStyle[attr];
          } else {
            target = document.defaultView.getComputedStyle(element, null)[attr];
          }
          // 在获取 opactiy 时需要获取小数 parseFloat
          return NumberMode == 'float' ? parseFloat(target) : parseInt(target);
        };
        var loadMore = function loadMore() {
          if ((scrollEl.scrollTop || window.pageYOffset) + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
            binding.value();
          }
        };
      }
    });
  }
};