利用iscroll实现上拉加载下拉刷新

1、首先引用isScroll插件

说明：页面加载时初始化isScroll，然后调用pullDownAction()和pullUpAction()，每次切换tab时，只需要对pullDownAction()和pullUpAction()里面的东西进行修改即可！！！

html：

<div id="moreWrapper" class="moreWrapper">
        <div class="news-tab flexbox flexbox-middle">
            <div class="tab-item active">公司动态</div>
            <div class="tab-item">行业新闻</div>
            <div class="tab-item">媒体报道</div>
            <div class="tab-item">案例</div>
            <div class="tab-item">大咖说</div>
        </div>
    </div>
    <div class="content bg-gray articleCate" id="wrapper">
        <div class="wrapper" id="wrapper-scroller">
            <div id="pullDown">
                <!--<span class="pullDownIcon"></span>-->
                <span class="pullDownLabel">下拉刷新...</span>
            </div>
            <ul class="news-tab-con article_list">
                <foreach name="article_slice" item="vo">
                    <li>
                        <a class="flexbox flexbox-middle border-bottom-1px" href="">
                            <div class="flexchild">
                                <div class="title">{$vo['title']}</div>
                                <div class="time">{$vo['c_time']}</div>
                            </div>
                            <div class="item-img"><img src= "{$vo['img']}"></div>
                        </a>
                    </li>
                </foreach>
            </ul>
            <!--上拉加载更多-->
            <div id="pullUp" attrVal="">
                <!--<span class="pullUpIcon"></span>-->
                <span class="pullUpLabel">上拉加载更多...</span>
            </div>
        </div>
    </div>

css关键代码实现wrapper里面滚动

/*上拉加载*/
#wrapper {
    position: absolute;
    top: .68rem;
    left: ;
    width: %;
    height: auto;
    padding: ;
    overflow: auto;
}
#wrapper-scroller {
    position: absolute;
    z-index: ;
    /* -webkit-touch-callout: none; */
    -webkit-tap-highlight-color: rgba(, , , );
    width: %;
    padding: ;
}
#wrapper #pullDown, #wrapper #pullUp {
    background: #f7f7f7;
    height: .92rem;
    line-height: .92rem;
    font-size: .24rem;
    color: #;
    text-align: center;
}

js：

    //获取列表的五个参数定义
    var type = ,page = , limit = "";
    var generatedCount = ; //上拉加载更多次数统计
    var myScroll = ''; //主列表的iscroll实例
    var countFlag = true; //上拉计数标识，防止还没渲染页面就再次加一
    var myScrollFlag = false, oIscrollFlag = false; //标识iscroll有没有实例化成功（实例化过后才能refresh）
    var all_width = ;
    var len = $(".news-tab .tab-item").length;
    for (var i = ; i < len; i++) {
        var item_width = $(".news-tab .tab-item").eq(i).outerWidth();
        console.log(item_width)
        all_width += parseFloat(item_width);
        console.log(all_width)
    }
    $('.news-tab').css('width', all_width + 'px');
    var myscroll1 = new iScroll("moreWrapper", {hScroll: true, vScroll: false, hScrollbar: false, vScrollbar: false});

    //点击选项卡切换
    $("body").on("click", ".news-tab .tab-item", function () {
        type = $(this).index()+;
        $(".news-tab .tab-item").removeClass("active");
        $(this).addClass("active");
        $(".article_list").html("");
        //将上拉加载次数清0
        generatedCount = ;
        //切换选项卡的时候将无更多数据的限制去掉
        $("#pullUp").attr("attrVal", );
        $("#pullUp .pullUpLabel").html("上拉加载更多...");
        getOrderByAjax(type,,);
    })
    //初始化列表数据
    getOrderByAjax(,,);
    /**
     * 获取保单列表的ajax请求
     * @param type 咨询类型（公司动态，行业新闻，媒体报道，保险案例，大咖说保险）
     * @param page 请求的页数
     * @param limit 加载更多的传值（默认0，第一次加载更多为1，以此类推）
     */
    function getOrderByAjax(type,page,limit) {
        $.ajax({
            url: "{:U('ajaxArticleCate')}",
            type: 'post',
            dataType: 'json',
            data: {'type':type,'page':page},
            beforeSend: function () { //ajax加载的时候使用loading遮罩层
                if (limit > ) return;
                $(".loading-box").show();
            },
            complete: function () {
                if (limit > ) return;
                $(".loading-box").hide();
            },
            success: function (res) {
                if (res.data.article == ) { //已经没有更多保单数据
                    // $("#pullup .pullUpLabel").text("无更多数据！");
                    $("#pullUp").attr("attrVal", ""); //这个值为1的时候说明无更多数据了
                    setTimeout(function () {
                        if (myScrollFlag) {
                            myScroll.refresh();
                        }
                    }, )
                    return;
                }

                if (res.data.article.length <  && limit == ) { //如果刚进来就没有10条，则隐藏上拉加载更多
                    $("#pullUp").hide();
                } else {
                    $("#pullUp").show();
                }

                $("#pullUp").attr("attrVal", ""); //这个值为0表示可以上拉加载更多数据
                $("#pullUp .pullUpLabel").html("上拉加载更多...");

                var html='';
                if(res.data.article && res.data.article.length != ){
                    var list=res.data.article;
                    for(var i=;i<res.data.article.length;i++){
                        html+='<li class="border-bottom-1px"><a class="flexbox flexbox-middle" href={:U("ajaxArticleContent")}?id='+list[i].id+'>'
                        html+='<div class="flexchild">'
                        html+='<div class="title">'+list[i].title+'</div>'
                        html+='<div class="time">'+list[i].c_time+'</div>'
                        html+='</div>'
                        html+='<div class="item-img"><img src= "'+list[i].img+'"></div>'
                        html+='</a></li>';
                    }
    //                $(".article_list").append(html);
                    $(".article_list").append(html);
                    countFlag = true;

                    $("#myorder-wrapper").show();

                    /*//如果是第一次加载，默认列表置回顶部
                    if (limit == 0) {
                        if (myScrollFlag) {
                            myScroll.scrollTo(0, 0, 100, false);
                        }
                    }*/

                    setTimeout(function () {
                        if (myScrollFlag) {
                            myScroll.refresh();
                            if (limit == ) {
                                console.log("")
                                myScroll.scrollTo(, -, , false);
                            }
                        }
                    }, ); //刷新iscroll
                }
            }
        })
    }
    </script>
    <!--下拉刷新、上拉加载更多相关js-->
    <script>
        //设置容器高度
        $("#wrapper").height($(window).height() - $(".header").height() - $(".news-tab").outerHeight());
        /*+ $("#pullDown").outerHeight()*/
        var pullDownEl, pullDownOffset,
            pullUpEl, pullUpOffset;

        //下拉加载及刷新
        function pullDownAction() {
            generatedCount = ; //下拉刷新的时候清空上拉加载更多的次数统计
            getOrderByAjax(type,page,);
        }

        //上拉加载及刷新
        function pullUpAction() {
            var isMore=$("#pullUp").attr("attrVal");
            if (countFlag&&isMore!="") {
                limit = ++generatedCount;
                countFlag = false;
                page++;
                getOrderByAjax(type,page,limit);
            }

        }

        function loaded() {
            pullDownEl = document.getElementById('pullDown');
            pullDownOffset = pullDownEl.offsetHeight;
            // console.log(pullDownOffset);

            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;

            myScroll = new iScroll('wrapper', {
                hScroll: false,
                vScroll: true,
                x: ,
                y: ,
                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 = '';
                        if ($("#pullUp").attr("attrVal") == ) {
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '无更多数据！';
                            return;
                        }
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                    }
                },
                onScrollMove: function () {
                    if (this.y >  && !pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'flip';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开刷新...';
                        this.minScrollY = ;
                    } else if (this.y <  && pullDownEl.className.match('flip')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        this.minScrollY = -pullDownOffset;
                    } else if (this.y < (this.maxScrollY - ) && !pullUpEl.className.match('flip')) {
                        if ($("#pullUp").attr("attrVal") == "") return; //无更多数据的时候上拉加载更多直接return
                        pullUpEl.className = 'flip';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开刷新...';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + ) && 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')) {
                        if ($("#pullUp").attr("attrVal") == "") return; //无更多数据的时候上拉加载更多直接return
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                        pullUpAction();    // Execute custom function (ajax call?)
                    }
                }
            });

            //myscroll实例化完之后置为true
            myScrollFlag = true;

            setTimeout(function () {
                document.getElementById('wrapper').style.left = '';
            }, );
        }

        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, {passive: false});

        document.addEventListener('DOMContentLoaded', function () {
            setTimeout(loaded, );
        }, false);
    </script>