利用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="0">
                <!--<span class="pullUpIcon"></span>-->
                <span class="pullUpLabel">上拉加载更多...</span>
            </div>
        </div>
    </div>

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

/*上拉加载*/
#wrapper {
    position: absolute;
    top: 1.68rem;
    left: 0;
     100%;
    height: auto;
    padding: 0;
    overflow: auto;
}
#wrapper-scroller {
    position: absolute;
    z-index: 1;
    /* -webkit-touch-callout: none; */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     100%;
    padding: 0;
}
#wrapper #pullDown, #wrapper #pullUp {
    background: #f7f7f7;
    height: 0.92rem;
    line-height: 0.92rem;
    font-size: 0.24rem;
    color: #999;
    text-align: center;
}

js：

    //获取列表的五个参数定义
    var type = 1,page = 1, limit = "";
    var generatedCount = 0; //上拉加载更多次数统计
    var myScroll = ''; //主列表的iscroll实例
    var countFlag = true; //上拉计数标识，防止还没渲染页面就再次加一
    var myScrollFlag = false, oIscrollFlag = false; //标识iscroll有没有实例化成功（实例化过后才能refresh）
    var all_width = 0;
    var len = $(".news-tab .tab-item").length;
    for (var i = 0; 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()+1;
        $(".news-tab .tab-item").removeClass("active");
        $(this).addClass("active");
        $(".article_list").html("");
        //将上拉加载次数清0
        generatedCount = 0;
        //切换选项卡的时候将无更多数据的限制去掉
        $("#pullUp").attr("attrVal", 0);
        $("#pullUp .pullUpLabel").html("上拉加载更多...");
        getOrderByAjax(type,1,0);
    }) 
    //初始化列表数据
    getOrderByAjax(1,1,0);
    /**
     * 获取保单列表的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 > 0) return;
                $(".loading-box").show();
            },
            complete: function () {
                if (limit > 0) return;
                $(".loading-box").hide();
            },
            success: function (res) {
                if (res.data.article == 0) { //已经没有更多保单数据
                    // $("#pullup .pullUpLabel").text("无更多数据！");
                    $("#pullUp").attr("attrVal", "1"); //这个值为1的时候说明无更多数据了
                    setTimeout(function () {
                        if (myScrollFlag) {
                            myScroll.refresh();
                        }
                    }, 100)
                    return;
                }

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

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

                var html='';
                if(res.data.article && res.data.article.length != 0){
                    var list=res.data.article;
                    for(var i=0;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 == 0) {
                                console.log("11")
                                myScroll.scrollTo(0, -46, 100, false);
                            }
                        }
                    }, 100); //刷新iscroll
                }
            }
        })
    }
    </script>
    <!--下拉刷新、上拉加载更多相关js-->
    <script>
        //设置容器高度
        $("#wrapper").height($(window).height() - $(".header").height() - $(".news-tab").outerHeight());
        /*+ $("#pullDown").outerHeight()*/
        var pullDownEl, pullDownOffset,
            pullUpEl, pullUpOffset;
    
    
        //下拉加载及刷新
        function pullDownAction() {
            generatedCount = 0; //下拉刷新的时候清空上拉加载更多的次数统计
            getOrderByAjax(type,page,0);
        }
    
        //上拉加载及刷新
        function pullUpAction() {
            var isMore=$("#pullUp").attr("attrVal");
            if (countFlag&&isMore!="1") {
                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: 0,
                y: 0,
                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") == 1) {
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '无更多数据！';
                            return;
                        }
                        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')) {
                        if ($("#pullUp").attr("attrVal") == "1") return; //无更多数据的时候上拉加载更多直接return
                        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')) {
                        if ($("#pullUp").attr("attrVal") == "1") 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 = '0';
            }, 800);
        }
    
        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, {passive: false});
    
        document.addEventListener('DOMContentLoaded', function () {
            setTimeout(loaded, 80);
        }, false);
    </script>