相信做过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. ST表——————一失足成千古恨系列2

    在此先祝自己这个系列写的越少越好qwq(保证不超过4篇(flag已立)) 考试原题:(绝壁是看完复联出的) 第一反应:线段树??不对,是st表.嗯,没错.哎,st表咋写来着??完了凉了. 结果:写暴搜 ...

  2. install mysql firewall

  3. ModuleNotFoundError: No module named 'mysql'

    问题:使用sqlalchemy初始化数据库报错,如图: 解决办法: pip install mysql-connector 安装后即可正常运行了 参照: https://blog.csdn.net/j ...

  4. day27—JavaScript实现定时器及其应用案例

    转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...

  5. Gitlab仓库搭建和免密使用gitlab

    Gitlab简介 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 可通过Web界面进行访问公开的或者私人项目.它拥有与Github类似的 ...

  6. 求 主板型号 945GME - ICH7M/U 支持的最大内存，以及内存型号 10

    https://zhidao.baidu.com/question/400302290.html 求 主板型号 945GME - ICH7M/U 支持的最大内存,以及内存型号 10 主板型号 明基 J ...

  7. Borland C++ Builder 编译绿色Exe程序

    按照“打开Project/Option 翻到Packages页,去掉Build with runtime packages前面的勾. http://www.jinyuanbao.cn翻到Linker页 ...

  8. poi3617Best Cow Line ——贪心法

    给定长度为N(1≤N≤2000)的字符串S,要构造一个长度为N的字符串T.期初,T是一个空串,随后反复进行下列任意操作. ·从S的头部删除一个字符,加到T的尾部 ·从S的尾部删除一个字符,加到T的尾部 ...

  9. java.sql.SQLException:连接是只读的。不允许导致数据修改的查询

    我的项目中 service的实现类少了写一个注解   : 只读事务(@Transactional(readOnly = true) 应用场合: 如果你一次执行单条查询语句,则没有必要启用事务支持,数据 ...

  10. python datetime模块的strftime()

    strftime()   可以对datetime对象进行格式化,生成需要时间格式的时间 strptime()  可以对格式化后的时间再生成datetime对象 格式化时间时,如果不想要-来隔开,还可以 ...