1、首先引用isScroll插件

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

 

 

html：

     
        
      
             
       
        公司动态
       
            
       
        行业新闻
       
            
       
        媒体报道
       
            
       
        案例
       
            
       
        大咖说
       
        
      
    
     
    
     
        
      
            
       
                
                        
        下拉刷新...            
       
            
       
                
                            
         
                         
           
 
            
             {$vo['title']}
            
 
            
             {$vo['c_time']}
            
 
           
 
           
            
           
                     
                
                    
       
            
                   
       
                
                        
        上拉加载更多...            
       
        
      
    
     

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
     
      '                        html+='
      
       '                        html+='
       
        '+list[i].title+'
       
'                        html+='
       
        '+list[i].c_time+'
       
'                        html+='
      
'                        html+='
      
       
      
'                        html+='';                    }    //                $(".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                }            }        })    }