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

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

转载于:https://www.cnblogs.com/liujingjing/p/6054472.html

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

基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
微信中禁止网页下拉出现网页由XXX提供【亲测有效】
最近在开发过程中遇到新的需求:在微信公众号中禁止下拉出现我司域名,微信公众号中的域名是由微信内置浏览器根据网址自动读取,暂时不支持自定义功能.在无法更改的前提下,想到了禁止页面下拉的方法.于是有了以下 ...
一起谈.NET技术，ASP.NET MVC2.0在Tab页中实现异步无刷新分页
概述很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...
JS学习笔记-判断文本域当中滚动条的位置、滚动条下拉至底部才可以提交
老规矩,废话不多说,先来看效果: CV即可直接使用,有什么在这里插入代码片问题可以留言或者私信,笔者看到都会第一时间回复的. 代码: <!DOCTYPE html> <html> ...
java滚动条下拉_[Java教程]相对漂亮的滚动条slimscroll可以实现下拉加载
[Java教程]相对漂亮的滚动条slimscroll可以实现下拉加载 0 2016-03-23 16:00:05 在之前的开发中遇到过下拉加载想要漂亮点的滚动条,但是最初引入的mCustomScrol ...
WP8中 ListBox x下拉刷新以及 ScrollViewer/ListBox 的ManipulationCompleted 失效的解决方案
WP8中 ListBox x下拉刷新以及 ScrollViewer/ListBox 的ManipulationCompleted 失效的解决方案参考文章: (1)WP8中 ListBox x下拉刷 ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
java如何读取下拉列表的值_java - 如何在Selenium 2中选择/获取下拉选项
java - 如何在Selenium 2中选择/获取下拉选项我正在将我的selenium 1代码转换为selenium 2,并且无法找到在下拉菜单中选择标签的任何简单方法或获取下拉列表的选定值. 你 ...
下拉选择_在管理Excel中实现联动下拉选择
在系统中常常出现这样的情况:由于下拉选择的数量太多了,难以高效选择.为此管理Excel通过通过引入多级联动选择的方式来减少下拉选择的困难度.先看下使用效果: 联动下拉选择这个功能,在管理Excel中 ...
excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...

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

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

最新文章

热门文章