上拉加载,下拉刷新(未实现)

来源:互联网 发布:噪声检测软件哪款好 编辑:程序博客网 时间:2024/06/07 02:27
/** * @param targetElem 添加“所有优惠券已加载~~~.”的元素。 * @param opt 按页查询,要查询的页码,之后会自增 1。 */function slideLoad(targetElem,opt) {    opt = opt || {};    this.pageNum = opt.pageNum || 1;    this.touch = null;    this.targetElem = targetElem || document.getElementsByTagName("body")[0];}slideLoad.prototype = {    constructor: slideLoad,    init: function () {    },    /**     * 上滑加载     * @param slideUpFunc 加载函数     */    slideUpLoad: function(slideUpFunc){        if(document.getElementsByClassName("pullload-load").length <= 0){            var node = document.createElement("div");            node.className = "pullload-load";            node.innerHTML = '<span class="loading"></span>加载中...';            document.getElementsByTagName("body")[0].appendChild(node);        }        var thatPageNum = this.pageNum;        var end = 0;        var start =0;        this.touch = function(event){            var event = event || window.event;            var date = new Date();            switch(event.type){                case "touchstart":                    start = date.getSeconds();                    break;                case "touchend":                    $(".pullload-load").css("display","none");                    end = date.getSeconds();                    if(end-start >= 1){                        slideUpFunc(++thatPageNum);                    }                    break;                case "touchmove":                    var marginBot = 0;                    if (document.compatMode === "CSS1Compat"){                        marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-  document.documentElement.clientHeight;                    } else {                        marginBot = document.body.scrollHeight - document.body.scrollTop-  document.body.clientHeight;                    }                    if(marginBot<=0) {                        //滚动条已在底部                        $(".pullload-load").css("display","block");                    }                    break;            }        }        document.addEventListener('touchstart',this.touch, false);        document.addEventListener('touchmove',this.touch, false);        document.addEventListener('touchend',this.touch, false);    },    destroySlideUpLoad :function () {        document.removeEventListener('touchstart',this.touch);        document.removeEventListener('touchmove',this.touch);        document.removeEventListener('touchend',this.touch);        var overNode = document.createElement("div");        overNode.className = "depleted";        overNode.innerText = '所有优惠券已加载~~~.';        this.targetElem.appendChild(overNode);    }}

通过slideUpLoad函数完成上拉时底部的转圈圈放手时执行传入的函数参数。
检测到最后一页时调用destroySlideUpLoad 去除事件绑定。