tab切换中的滚动条下拉分页带来的问题

相信做过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种方法都有优势和弊端，综合自己的项目来使用就好了。

以上纯属个人愚解，如有错误还望保函非喜勿喷，谢谢。

巴特西

tab切换中的滚动条下拉分页带来的问题

最新文章

热门文章