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>