美文网首页
JS lazyload

JS lazyload

作者: 光影墨辰 | 来源:发表于2017-11-02 18:19 被阅读0次
    /**
     * 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

          本文链接:https://www.haomeiwen.com/subject/dkjapxtx.html