vue-weui-expand/src/components/list/dropload.js

WeUI 的轻量级 js 封装

//--------------上拉加载更多---------------
import {getScrollTop,getClientHeight,getScrollHeight} from '../comm/comm.js'

//@pram ...
// distance 底部的距离加载
// el 容器
// fnLoadDown 下拉加载更多
// fnLoadUp 上拉加载更多

function Init({distance=0,el,fnLoadDown,fnLoadUp}={}){
    //元素
    //el=document.getElementById('app');
    if(fnLoadDown){
           window.console.log('ddd');
    }
   

    let node_down = window.document.createElement("div"); 
    node_down.className='dropload-down';
    el.appendChild(node_down);
      
    let node_refresh= window.document.createElement("div"); 
    node_refresh.className='dropload-refresh';
    node_refresh.innerHTML='↑上拉加载更多';
    node_down.appendChild(node_refresh);

    let node_load= window.document.createElement("div"); 
    node_load.className='dropload-load';
    node_load.innerHTML='<span class="loading"></span>数据加载中...';

    let node_up= window.document.createElement("div"); 
    node_up.className='dropload-up';

    let node_up_refresh=window.document.createElement("div"); 
    node_up_refresh.className='dropload-refresh';
    node_up_refresh.innerText='↓下拉刷新-自定义内容';
    node_up_refresh.style="height:0;transition: all 0ms ease 0s;";

    node_up.appendChild(node_up_refresh);
    el.insertBefore(node_up,el.childNodes[0]);

    let node_up_load= window.document.createElement("div"); 
    node_up_load.className='dropload-load';
    node_up_load.innerHTML='<span class="loading"></span>数据加载中...';


    let bottom=false;
    let top=false;
    let pull=0;
    let lock=false;
    let reo=0;


    let fnResetLoad=function(){
        if(lock){
            node_refresh.innerText='↑上拉加载更多';
            if(!node_down.contains(node_refresh)){
                node_down.appendChild(node_refresh);
            }

            if(node_down.contains(node_load)){
                node_down.removeChild(node_load);
            }
           
            node_up.style="height:0;transition: all 300ms ease 0s;";
            node_up.appendChild(node_up_refresh);
            if(node_up.contains(node_up_load)){
                node_up.removeChild(node_up_load);
            }

           
            lock=false;
        }
    }

    window.document.body.addEventListener('touchstart',function(){
        pull=event.touches[0].clientY;
       window.console.log('start');
    },true);

    window.document.body.addEventListener('touchmove',function(){
        window.console.log('move');
        if(lock){
         return;
        }

        if(!top&&(event.touches[0].clientY-pull>0)){

            window.console.log('top:'+getScrollHeight());
            if(getScrollTop()==0){
                top=true;
                pull=event.touches[0].clientY;
            }
        }


        if(top){
            let t=event.touches[0].clientY-pull;
            if(t>0){
                node_up.style="height:"+(t>300?300:t)+'px;';
                node_up_refresh.innerText='↓下拉刷新-自定义内容';
                if(t>=50){
                    node_up_refresh.innerText='释放刷新';
                }
            }

            reo=t;
        }

        //到达底部
        if(!bottom&&(pull-event.touches[0].clientY>0)){
            if(getScrollTop() + getClientHeight() +distance>= getScrollHeight()) {
                bottom=true;
                pull=event.touches[0].clientY;
            }
        }
        
        if(bottom){
            let t=pull-event.touches[0].clientY;
            if(pull-event.touches[0].clientY>=0){
                //下面空白部分随着拉动距离的变化而变化，最大120，超过
                node_down.style="height:"+(50+t)+'px;';
                node_refresh.innerText='释放加载更多';
            }
        }
        
    },true);

    window.document.body.addEventListener('touchend',function(){

        window.console.log(bottom,top);
        if(bottom){
            node_down.style="height:50px;";
            node_down.removeChild(node_refresh);
            node_down.appendChild(node_load);
            window.console.log('add ');
            bottom=false;
            if(fnLoadUp){
                lock=true;
                fnLoadUp({fnResetLoad});
            }
        }


        if(top){
            top=false;
            if(reo>=50){
                  node_up.style="height:50px;transition: all 300ms ease 0s;";
                  node_up.removeChild(node_up_refresh);
                  node_up.appendChild(node_up_load);
                  if(fnLoadDown){
                      lock=true;
                      fnLoadDown({fnResetLoad});
                  }
            }else{
                node_up.style="height:0px;transition: all 300ms ease 0s;";
                if(node_up.contains(node_up_load)){
                    node_up.removeChild(node_up_load);
                }
                if(!node_up.contains(node_up_refresh)){
                    node_up.appendChild(node_up_refresh);
                }
            }
        }
        
      
    },true);

    // window.onscroll = function() {
    //     if(getScrollTop() + getClientHeight() +distance>= getScrollHeight()) {
    //         bottom=true;
    //         window.console.log('dddddd');
    //     }
    // }
    
}


function install(Vue){
    Vue.prototype.dropload={Init};
}

export {Init,install}