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

小书MybatisPlus第4篇-表格分页与下拉分页查询
本文为mybatis系列文档的第4篇,前三篇请访问下面的网址. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查小书MybatisPlus第2篇-条件构造器的应用及总结小 ...
struts2 jsp表单提交后保留表单中输入框中的值下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
python webdriver中对不同下拉框通过文本值的选择
在自动化中python对下拉框的处理网上相对实例比较少,其它前辈写的教程中对下拉也仅仅是相对与教程来说的,比如下面: m=driver.find_element_by_id("Shippin ...
laravel 框架下拉分页
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
selenium 模拟拖动滚动条下拉
senium做自动化测试的过程中,有的页面需要下拉滚动条才能全部加载完成,否则加载不出来就定位不到想要的元素. 参考链接:http://www.cnblogs.com/landhu/p/5761794 ...
在win8中如何实现下拉刷新的功能
现在我以listview为例来讲述下拉刷新的功能! 在xaml中设置listview一定要设置一个这样的属性,IsSwipeEnabled=false,然后再listview控件的前面要布局下拉刷 ...
Bootstrap中的各种下拉菜单
@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...
小程序组件-swipe多页切换，并支持下拉刷新，上拉加载，menu动态联动切换
前言最近一个小程序项目中遇到一个需求,就是实现类似资讯类app的多页面切换的那种效果, 如下图: 最终效果: 1.功能分析首先实现这个功能分为三步: 实现顶部menu菜单实现多页面滑动切换支持 ...

随机推荐

loj#500 「LibreOJ β Round」ZQC 的拼图
分析二分倍数然后考虑dp[i][j]表示选到第i个x轴覆盖到j的情况y轴最多覆盖多少贡献柿子可以画图然后相似三角形得到代码 #include<bits/stdc++.h> usin ...
p4111 [HEOI2015]小Z的房间[简述矩阵树定理]
分析 [1]无向图图G的度数矩阵为D,邻接矩阵为A 我们定义这个图的Kirchhoff矩阵为D-A 这个矩阵的任意一个n-1阶主子式的行列式的绝对值就是这个图的生成树个数 [2]有向图如果要求内向 ...
第五周课程总结&实验报告三
1.已知字符串:"this is a test of java".按要求执行以下操作:(要求源代码.结果截图.) •统计该字符串中字母s出现的次数. •统计该字符串中子串" ...
JavaScript.InjectedScriptHost
"use strict"; (function(InjectedScriptHost, inspectedGlobalObject, injectedScriptId) { ...
Scala函数高级操作
字符串高级操作:***** 非常重要将函数赋值给变量/值def sayHello(name:String): Unit = { println(s"Hello:$name")} ...
Stupid cat & Doge （分形图）
[题目描述] [题目链接] http://noi.openjudge.cn/ch0204/8463/ [算法] 为求等级N下的点的坐标可由几何关系找到其与等级N-1下对应点的关系,然后递归直至所有点的 ...
JS方法使用中文出参数，报错异常
正常这样加载数字没问题,但是当参数是中文时就会报错 <li onclick='onSeach(‘’" + name+ "');'>" + name+ &quo ...
VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
最简单的神经网络-感知器-python实现
import numpy as np import matplotlib.pyplot as plt X=np.array([[1,3,3], [1,4,3], [1,1,1]]) Y=np.arra ...
JavaScript中正则使用
字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦, ...

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

tab切换中的滚动条下拉分页带来的问题的更多相关文章

随机推荐

热门专题