JS lazyload

/**
 * Created by Administrator on 2017/11/2.
 */

export const loadMore = {
  directives: {
    'load-more': {
      bind: function (el,binding) {
        let window_height = window.screen.height;
        let height;
        let settop, oldScrollTop;
        let scrolEl,heightEl;
        scrolEl = document.documentElement;
        heightEl = el;

        el.addEventListener('touchstart',() => {
          height = heightEl.clientHeight;
          settop = heightEl.offsetTop;
        },false)

        el.addEventListener('touchmove',() => {
          console.log('touchmove触发')
          LoadMore();
        },false)

        el.addEventListener('touchend',() => {
          oldScrollTop = scrolEl.scrollTop;
          moveEnd();
        },false)

        const moveEnd = () => {
         let  requestFram = requestAnimationFrame(() => {
            if (scrolEl.scrollTop != oldScrollTop) {
              oldScrollTop = scrolEl.scrollTop;
              moveEnd()
            } else {
              cancelAnimationFrame(requestFram);
              height = heightEl.clientHeight;
              LoadMore();
            }
        })
        }
        const LoadMore = () => {
         // console.log('scrolEl.scrollTop  : '+ scrolEl.scrollTop +"  "+ " windowHeight: " +  window_height + "  " + " height : "+ height + "settop: "+ settop)
          if(scrolEl.scrollTop + window_height >= settop + height - 900){
            binding.value();
          }
        }

      }
    }
  }
}

你可能感兴趣的:(JS lazyload)