相信做过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切换中的滚动条下拉分页带来的问题的更多相关文章

  1. 小书MybatisPlus第4篇-表格分页与下拉分页查询

    本文为mybatis系列文档的第4篇,前三篇请访问下面的网址. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总结 小 ...

  2. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  3. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  4. python webdriver中对不同下拉框通过文本值的选择

    在自动化中python对下拉框的处理网上相对实例比较少,其它前辈写的教程中对下拉也仅仅是相对与教程来说的,比如下面: m=driver.find_element_by_id("Shippin ...

  5. laravel 框架 下拉分页

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. selenium 模拟拖动滚动条下拉

    senium做自动化测试的过程中,有的页面需要下拉滚动条才能全部加载完成,否则加载不出来就定位不到想要的元素. 参考链接:http://www.cnblogs.com/landhu/p/5761794 ...

  7. 在win8中如何实现下拉刷新的功能

      现在我以listview为例来讲述下拉刷新的功能! 在xaml中设置listview一定要设置一个这样的属性,IsSwipeEnabled=false,然后再listview控件的前面要布局下拉刷 ...

  8. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

  9. 小程序组件-swipe多页切换，并支持下拉刷新，上拉加载，menu动态联动切换

    前言 最近一个小程序项目中遇到一个需求,就是实现类似资讯类app的多页面切换的那种效果, 如下图: 最终效果: 1.功能分析 首先实现这个功能分为三步: 实现顶部menu菜单 实现多页面滑动切换 支持 ...

随机推荐

  1. ElasticSearch ClusterBlockException[blocked by: [FORBIDDEN/12/index read-only / allow delete (api)]锁定状态，无法插入数据

    PUT /twitter/_settings { "index.blocks.read_only_allow_delete": null } 官网给出的解决办法

  2. 《图解设计模式》读书笔记3-2 Prototype模式

    目录 Prototype(原型)模式的由来 类图 代码 角色 我的理解 Prototype(原型)模式的由来 创建一个实例,可以关键字new创建.但有时候,我们需要在不指定类名的前提下生成实例,比如: ...

  3. redis连接报错:MISCONF Redis is configured to save RDB snapshots, but it is currently not able to...

    连接redis报错: MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persis ...

  4. 【ABAP系列】SAP ABAP-模块 字符串操作基础知识

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP-模块 字符串操 ...

  5. POJ - 3176 Cow Bowling 动态规划

    动态规划:多阶段决策问题,每步求解的问题是后面阶段问题求解的子问题,每步决策将依赖于以前步骤的决策结果.(可以用于组合优化问题) 优化原则:一个最优决策序列的任何子序列本身一定是相当于子序列初始和结束 ...

  6. C#计算两个日期的相隔天数

    DateTime start = Convert.ToDateTime(dateStart.ToShortDateString()); DateTime end = Convert.ToDateTim ...

  7. tp增删改查

    增: 向数据库增加新的数据,这里增是纯粹的增添数据,如果新增的数据包含主键,并且该主键已经在数据库存在,则无法新增数据的. //M("User") 用于高效实例化一个数据模型(M ...

  8. MySql-第七篇单表查询

    1.MySQL中可以使用+.-.*./. 1>但MySQL中没有提供字符串连接运算符,可以使用concat(a_str,'xxx')进行连接. 2>在算术表达式中使用null,将会导致整个 ...

  9. [Codeforces 639F] Bear and Chemistry (Tarjan+虚树)(有详细注释)

    [Codeforces 639F] Bear and Chemistry(Tarjan+虚树) 题面 给出一个n个点,m条边的无向图(不保证连通,可能有自环和重边),有q次询问,每次询问给出p个点和q ...

  10. Codeforces 433A (背包)

    题面 传送门 真是令人胃疼的题面 我不管,我要把苹果都给雪菜!(滑稽)(冬马党不要打我) 分析 突然感觉这题跟今年NOIP Day1T2有点像,都是根据数加减来构造背包,只不过这题是01背包而不是完全 ...