利用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;
    width: 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);
    width: 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>