相信做過tab切換中滾動條下拉分頁的童鞋都知道，我們在用scroll方法來做滾動條下拉分頁的時候，都是有bug，切換中間的內容會互相影響，為了解決這個問題，我總結了2種方法；
1.方法一：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="hidden" id="y_gspage" value=""/> <input type="hidden" id="y_nrpage" value=""/> <input type="hidden" id="y_gzpage" value=""/> <input type="hidden" id="y_pageCount" value=""/> <input type="hidden" id="csctime" value=""> <ul class="changeTitle"> <li class="gsyc">高手收益榜</li><li class="nrsy">牛人收益榜</li><li class="gznr">關注牛股</li> </ul> <div class="wrap"> <div class="rankCon" id="bang01"></div> <div class="rankCon" id="bang02"></div> <div class="rankCon" id="bang03"></div> </div> </body> <script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="tabfun.js"></script> <script type="text/javascript"> //tabq切換 $('.changeTitle li').click(function(){ var _index=$(this).index(); $(this).addClass('on').siblings().removeClass('on'); $('.rankCon').eq(_index).show().siblings('.rankCon').hide(); }); $(window).scroll(function () { //滾動條距離頂部距離 var scrolltotop=parseFloat($(window).scrollTop()); //窗口高度 var winheight = parseFloat($(window).height()); //內容總高度 var conheight = parseFloat($(document).height())-200*1; //總高度 var totalheight = scrolltotop + winheight; //判斷是否加載，當操作高度比內容大，空間充裕->加載 var nowTime = new Date().getTime(); var clickTime = $("#csctime").val(); if( clickTime != 'undefined' && (nowTime - clickTime < 1500)){ //alert('操作過於頻繁，稍后再試'); console.log(222); }else if(clickTime == 'undefined' || clickTime == ''){ $("#csctime").val(nowTime); }else{ console.log(111); $("#csctime").val(nowTime); if(totalheight >= conheight ){ cscHuaDonglModel().upAjax(); } } }); //手勢上滑 分頁特效 var cscHuaDonglModel = function(){ return { // 上拉滑動事件 加載新的分頁內容 upAjax:function(){ var type = $("#y_ggtype").val(); //隨便給的一個變量值為了區分到底是高手收益榜、牛人收益榜、還是關注牛人股； if(type == 'heightrank'){ //如果是高手收益榜 var page = $("#y_gspage").val(); //把此時的高手收益榜的value值賦給page; } if(type == 'profitsrank'){ //如果是高手收益榜 var page = $("#y_nrpage").val(); //把此時的牛人收益榜的value值賦給page; } if(type == 'followrank'){ //如果是關注牛人股 var page = $("#y_gzpage").val(); //把此時的關注牛人股的value值賦給page; } var pageCount = $("#y_pageCount").val(); //總條數 if(pageCount <= page*10){ //每頁10條數據 //沒有新數據了 //alert('sss'); }else{ if(page>=1){ //如果頁數大於1; page = page-1+1+1; //頁數++ if(type == 'heightrank'){ //如果是高手收益榜 getHeiGuess().init(page); //調用高手收益榜異步請求方法 } if(type == 'profitsrank'){ getProfitsRank().init(page); } if(type == 'followrank'){ getFollowStock().init(page); } } } }, // 下拉刷新事件 刷新當前頁面 downAjax:function(){ }, } } getHeiGuess().init(1); //默認顯示高手收益榜的數據 </script> </html>
/*高手收益榜*/ var getHeiGuess = function(){ return { init: function(page){ $.ajax({ url:urlHost+"stock/getHeigherGuess?sn="+randsn, dataType: "jsonp", data: {"page":page,"pageSize":5}, success: function(data){ if(data.Status && data.Data){ $("#y_ggtype").val('heightrank'); //重點在這里，把y_ggtype的值設置為heightrank，到時候點擊具體模塊的時候調用這個方法，獲取到的y_ggtype的val值都是變化的。下面的同理 $("#y_gspage").val(page); $("#y_pageCount").val(data.Data.count); var str; for(){ str+=''; } $("#bang01").html(str); } }) }); } } } /*牛人收益榜*/ var getProfitsRank = function(){ return { init: function(page){ $.ajax({ url:urlHost+"stock/getResult?sn="+randsn, dataType: "jsonp", data: {"page":page,"pageSize":5}, success: function(data){ if(data.Status && data.Data){ $("#y_ggtype").val('profitsrank'); $("#y_nrpage").val(page); $("#y_pageCount").val(data.Data.count); var str; for(){ str+=''; } $("#bang02").html(str); } }) }); } } } /*關注牛股*/ var getFollowStock = function(){ return { init: function(page){ $.ajax({ url:urlHost+"stock/getFollowStock?sn="+randsn, dataType: "jsonp", data: {"page":page,"pageSize":5}, success: function(data){ if(data.Status && data.Data){ $("#y_ggtype").val('followrank'); $("#y_gzpage").val(page); $("#y_pageCount").val(data.Data.count); var str; for(){ str+=''; } $("#bang03").html(str); } }) }); } } }
$(".gsyc").click(function(){
getHeiGuess().init(1);
});
/*牛人收益榜*/
$(".nrsy").click(function(){
getProfitsRank().init(1);
});
/*關注牛人股*/
$(".gznr").click(function(){
getFollowStock().init(1);
});
2.方法二：
具體參看這個網址：http://www.klduobao.com/mobile/GoGoodsMobile_shopGoGoods?shopId=1588081&orderCode=news
這個方法不是真正的tab切換，其實每點擊標簽，都換了不同的跳轉鏈接；如下圖：
然后這個頁面處理分頁的js如下：
判斷頁面是否滑到了底部：
總結：
方法1是真正的tab切換，因為在一個頁面進行的，以上處理方法的原理就是給一個參考變量和3個切換內容標識的變量，一一去對比參考變量的值到底是誰，如果為高手收益榜，就只加載高手收益榜的數據，並且scroll事件只影響此時的高手收益榜的內容塊，同理如果為牛人收益榜，就只加載牛人收益榜的數據，並且scroll事件只影響此時的牛人收益榜的內容塊，反正就是這么個理。雖然有點繞，但是理清楚了就簡單了；
方法2不是真正的tab切換，其實是頁面直接的跳轉，所以當然不會出現scroll事件互相影響的問題了，但是這個方法唯一的缺點就是要跳轉頁面url，這樣要消耗數據流量一些；
總之，2種方法都有優勢和弊端，綜合自己的項目來使用就好了。
以上純屬個人愚解，如有錯誤還望保函非喜勿噴，謝謝。