利用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>
