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菜单 实现多页面滑动切换 支持 ...
随机推荐
- 前端二倍图的思考（涉及Retina）
EXCELL格式 1 csv格式导出来之后不能用EXCELL打开,会乱码.用记事本打开,然后将"(英文的引号出掉),就可以了. 关于二倍图的操作 概念: 设备像素:也叫物理像素,显示设备上最 ...
- day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...
- linux使用pigz多线程压缩
因为tar zip是单线程的压缩,压缩起来很慢,这个使用使用pigz工具辅助就会使用多线程了. 安装 sudo apt install pigz 压缩 tar cvf - test.txt | pig ...
- MQ基础知识学习
之前听人提起了MQ协议,我就去稍微了解了一下什么是MQ,和MQ的一些基础性的知识. 什么是MQ呢? 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据 ...
- 【报错】The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
提交表单之后, 报错页面显示: HTTP Status 404 – 未找到 Type Status Report 消息 Not found 描述 The origin server did not f ...
- JAVA中JavaBean对象之间属性拷贝的方法
JAVA中JavaBean对象之间的拷贝通常是用get/set方法,但如果你有两个属性相同的JavaBean或有大部分属性相同的JavaBean,对于这种情况,可以采用以下几个简便方法处理. 下面对这 ...
- Java单链表
一.概述 二.主方法 //创建头结点 private HeroNode head = new HeroNode(-1,null,null); //计数器,用于id的自增 private static ...
- 前端最常用的跨域方式--jsonp
jsonp通过动态创建script标签的方式来实现跨域通信.原理是浏览器允许html标签在不同的域名下加载资源. <script> var script = document.create ...
- git账号失效问题解决
linux开发机上,使用某人账号,进行代码同步.该员工离职,导致该git账号不可用. 此时需要完成3步配置: 1.生成新的公私秘钥:在~/.ssh/config中把私钥文件路径 append到文件末尾 ...
- vue项目中配置favicon图标
如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标.利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标. 不配置是这样子的: fa ...