zoukankan      html  css  js  c++  java
  • 引用iscroll的一个封装方法

    var Page = function(cid, data,callback) {
    var _self = this;
    var cid = $(cid);
    var currPage=1;
    // 下拉上拉加载数据
    var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
    this.query = function(curr) {
    if(curr){
    currPage=curr;
    }
    data["PAGE_INFO.currentPage"]=currPage;
    if(!myScroll){loaded();}
    PAjax({
    data : data,
    success : function(json) {
    $('#loading').hide();
    if (isEmpty(json.MSG)) {
    currPage++;
    var list = json.PAGE_LIST;
    _self.addBillHtml(list);
    myScroll.refresh();
    } else {
    _alert(json.MSG, "", function() {
    var html = '<li class="listCenter">数据加载失败!</li>';
    $(cid).append(html);
    });
    }
    }
    });
    }
    this.refresh=function(){
    cid.empty();
    _self.query(1);
    }
    this.addBillHtml = function(list) {
    if (list && list.length > 0) {
    var htmls = [];
    $.each(list, function() {
    var html = callback(cid, this);
    htmls.push(html);
    })
    cid.append(htmls);
    } else {
    $("#pullUp").hide();
    $(".endList").show();
    }
    ;
    myScroll.refresh();
    }
    this.iScrollClick = function() {
    if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent))
    return false;
    if (/Chrome/i.test(navigator.userAgent))
    return (/Android/i.test(navigator.userAgent));
    if (/Silk/i.test(navigator.userAgent))
    return false;
    if (/Android/i.test(navigator.userAgent)) {
    var s = navigator.userAgent.substr(navigator.userAgent
    .indexOf('Android') + 8, 3);
    return parseFloat(s[0] + s[3]) < 44 ? false : true
    }
    }

    // 初始化iScroll控件
    function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = pullUpEl.offsetHeight;
    myScroll = new iScroll(
    'wrapper',
    {
    scrollbarClass : 'myScrollbar', /* 重要样式 */
    useTransition : false, /* 此属性不知用意,本人从true改为false */
    topOffset : pullDownOffset,
    onRefresh : function() {
    if (pullDownEl.className.match('loading')) {
    pullDownEl.className = '';
    //pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
    } else if (pullUpEl.className.match('loading')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
    }
    },
    onScrollMove : function() {
    /*if (this.y > 5 && !pullDownEl.className.match('flip')) {
    pullDownEl.className = 'flip';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
    this.minScrollY = 0;
    } else if (this.y < 5
    && pullDownEl.className.match('flip')) {
    pullDownEl.className = '';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
    this.minScrollY = -pullDownOffset;
    } else */
    if (this.y<0 && this.y < (this.maxScrollY - 5)
    && !pullUpEl.className.match('flip')) {
    pullUpEl.className = 'flip';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放立即加载...';
    this.maxScrollY = this.maxScrollY;
    } else if (this.y<0 && this.y > (this.maxScrollY + 5)
    && pullUpEl.className.match('flip')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
    this.maxScrollY = pullUpOffset;
    }
    },
    onScrollEnd : function() {
    if (pullDownEl.className.match('flip')) {
    //pullDownEl.className = 'loading';
    // pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
    // pullDownAction(); // Execute custom function
    // (ajax call?)
    } else if (pullUpEl.className.match('flip')) {
    pullUpEl.className = 'loading';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
    // pullUpAction(); // Execute custom function (ajax
    // call?)
    _self.query();
    }
    }
    });

    setTimeout(function() {
    document.getElementById('wrapper').style.left = '0';
    }, 800);
    }
    // 初始化绑定iScroll控件
    /*document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    }, false);*/
    document.addEventListener('DOMContentLoaded', loaded, false);

    }

    引用

    page=new Page(tabs,data,addRow);
    page.query();

  • 相关阅读:
    mysql表分区
    .NET面试题
    .NET中CORS跨域访问WebApi
    一些VS2013的使用技巧(转载)
    java enum(枚举)使用详解 + 总结(转载)
    java枚举类型(转载)
    解析oracle的rownum,数据库查询结果返回行数设置
    使用jquery-qrcode生成二维码(转载)
    Spring 之注解事务 @Transactional(转载)
    spring @Transactional注解参数详解(转载)
  • 原文地址:https://www.cnblogs.com/smght/p/5163248.html
Copyright © 2011-2022 走看看