deopLoading.js

//------------------------------------下拉刷新实现代码----------------------------------------------------//

//下拉刷新以及无线加载，在app中特别常见，实现思路在于，下拉的时候触发事件发送ajax请求，带一个当前页码数
//服务端给你返回相应的数据
//本代码主要演示了下拉触发的事件（其实下拉刷新可以看做是触发一个事件从而发送请求返回数据！）

//思路：每下拉一次向服务端发送一次请求，下拉的时候出现加载动画，当数据请求成功的时候关闭加载动画
var slide = function (option) {
    var defaults={
        wrapper:'',
        next:function(){}
    }
    var start,
            end,
            length,
            isLock = false,//是否锁定整个操作
            isCanDo = false,//是否移动滑块
            isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
            hasTouch = 'ontouchstart' in window && !isTouchPad;
    var obj = document.querySelector(option.wrapper);
    var loading=obj.firstElementChild;
    var offset=loading.clientHeight;
    var objparent = obj.parentElement;
    /*操作方法*/
    var fn =
    {
        //移动容器
        translate: function (diff) {
            obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
            obj.style.transform='translate3d(0,'+diff+'px,0)';
        },
        //设置效果时间
        setTransition: function (time) {
            obj.style.webkitTransition='all '+time+'s';
            obj.style.transition='all '+time+'s';
        },
        //返回到初始位置
        back: function () {
            fn.translate(0 - offset);
            //标识操作完成
            isLock = false;
        },
        addEvent:function(element,event_name,event_fn){
            if (element.addEventListener) {
                element.addEventListener(event_name, event_fn, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + event_name, event_fn);
            } else {
                element['on' + event_name] = event_fn;
            }
        }
    };

    fn.translate(0-offset);
    fn.addEvent(obj,'touchstart',start);//滑动开始
    fn.addEvent(obj,'touchmove',move);//滑动中
    fn.addEvent(obj,'touchend',end);//滑动结束
    fn.addEvent(obj,'mousedown',start)//鼠标按下
    fn.addEvent(obj,'mousemove',move)//鼠标移动
    fn.addEvent(obj,'mouseup',end)//鼠标离开

    //滑动开始
    function start(e) {
        if (objparent.scrollTop <= 0 && !isLock) {
            var even = typeof event == "undefined" ? e : event;
            //标识操作进行中
            isLock = true;
            isCanDo = true;
            //保存当前鼠标Y坐标
            start = hasTouch ? even.touches[0].pageY : even.pageY;
            //消除滑块动画时间
            fn.setTransition(0);
            loading.innerHTML='正在加载';
        }
        return false;
    }
    //滑动中
    function move(e) {
        if (objparent.scrollTop <= 0 && isCanDo) {
            var even = typeof event == "undefined" ? e : event;
            //保存当前鼠标Y坐标
            end = hasTouch ? even.touches[0].pageY : even.pageY;
            if (start < end) {
                even.preventDefault();
                //消除滑块动画时间
                fn.setTransition(0);
                //移动滑块
                if((end-start-offset)/2<=150) {
                    length=(end - start - offset) / 2;
                    fn.translate(length);
                }
                else {
                    length+=0.3;
                    fn.translate(length);
                }
            }
        }
    }
    //滑动结束
    function end(e) {
        if (isCanDo) {
            isCanDo = false;
            //判断滑动距离是否大于等于指定值
            if (end - start >= offset) {
                //设置滑块回弹时间
                fn.setTransition(1);
                //保留提示部分
                fn.translate(0);
                //执行回调函数
                loading.innerHTML='正在加载';
                if (typeof option.next == "function") {
                    option.next.call(fn, e);
                }
            } else {
                //返回初始状态
                fn.back();
            }
        }
    }
}
//调用函数
var href = window.location.pathname
var index = href .lastIndexOf("\/");  
href  = href .substring(index + 1, href .length-5);
if(href=='page'){
    pag = 2
}else if($('.aa').length==0){
    pag = Number(href)
    $('.bb').html('亲已经没有再多了')
    $('.cc').show()
}else{
    pag = Number(href)+1
}
slide({wrapper:"#wrapper",next: function (e) {
    //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
    var that = this;
    setTimeout(function () {
        window.location='http://agent.jxqp.me/index.php/Mobile/Demo/page/p/'+pag+'.html'
        document.querySelector('.loading').innerHTML='';
        //这里面写ajax请求
        that.back.call();
    }, 2000);
}});