h5做手机端-下拉刷新上拉加载-iscroll4

利用iscroll4.js做下拉刷新上拉加载功能，亲用

html部分

     <div id="wrapper">
            <div id="scroller">
                <div id="pullDown" >
                    <div ><i class="pullDownLabel"></i></div>
                </div>
                <!-- </ul> -->
                <!--         <ul id="ulData">
                             <li> 1111</li>
                             <li> 1111</li>
                         </ul>-->
                <div class="zmpackageLists" id="packageList">

                </div>
                <div id="pullUp" class="zmRefresh">
                    <span class="pullUpLabel" id="tipWords">上拉加载更多</span>
                </div>
            </div>
        </div>**加粗样式**

CSS;

注：wrapper要绝对定位

引入.js包

js:
var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 0;
//初始状态，加载数据
function loadAction(){
$("#packageList").html("");
var para = getParas();自定义，查询列表条件方法
packageList(para);//动态生成列表数据的方法，自定义
myScroll.refresh();
}

//下拉刷新当前数据
function pullDownAction () {
    setTimeout(function () {
        //这里执行刷新操作
        console.log("下拉刷新");
        pageNum = 1;
        $("#packageList").html("");
        var para = getParas();
        packageList(para);
        myScroll.refresh();
    }, 400);
}

//上拉加载更多数据
function pullUpAction () {
    console.log("更多数据");
    setTimeout(function () {
        pageNum++;
        console.log("total nn：",total);
        if(Math.ceil(total/5) < pageNum){
            console.log("meiyl ");
        }else{
            console.log("pageNum",pageNum);
            var para = getParas();
            packageList(para);
        }
        myScroll.refresh();
    }, 400);
}
function updateTips() {
    setTimeout(function() {
        if(total == 0){
            $("#tipWords").text("暂无数据");
        }
        else if(total <= pageSize*pageNum){
            $("#tipWords").text("我是有底线的");
        }

    }, 1000);
}
/**
 *调用scrollAction.js ,
 * 下拉刷新的id一定要是 【pullDown】，上拉加载的id一定要是【pullUp】
 *
 * 用iScroll4.js实现上拉加载和下拉刷新
 * @param wrapperId 滚动容器的 elementId
 * @param callbc  滚动回调，参数：refresh 表示下拉刷新，loadmore 表示上拉加载
 *
 * @return myScroll 将对象返回（注意，在执行完成数据刷新/加载之后要调用 myScroll.refresh(),否则会上拉会反弹）
 */
     function loaded() {
    //动画部分
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = pullUpEl.offsetHeight;
    myScroll = new iScroll('wrapper', {
        useTransition: true,
        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 < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新';
                this.maxScrollY = this.maxScrollY;
            } else if (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?)
            }
        }
    });

    loadAction();
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止冒泡
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 0); }, false);
上面提到的js可在本人主页的下载资源中下载，不知道怎么链接过来，见谅！