swiper是一个很好用的插件,免费、开源,关于轮播、切换、分页、动画效果等等。官网上给的源码案例,嗯,很基础,太基础了,哈~幸好文档还算OK,如果实现更好的具有设计感的页面,还是很好的。
之前在网上看过一个淘宝案例的源码,通过滑动地球来变换商品,额…代码理解并不难,但有设计感。跑题了,这个之后再详细解读,今儿要说的是,使用swiper实现tab切换,并让每一个内容模块都可以动态请求加载数据。
数据请求后列表可以上拉下滑操作,实现导航吸顶,具体请移步:swiper组件实现tab——内容切换、动态数据请求、加载(续)——通过监测手指滑动实现导航吸顶
先把swiper官网放出来:https://www.swiper.com.cn/。
目前有Swiper4.x,相较于Swiper3.x和Swiper2.x这三个版本,具体比较看官网链接https://www.swiper.com.cn/about/us/。
或者以下截图:
swiper插件用来慢慢研究,大概使用到的时候取查文档也是可以的。我看网上大多是vue和swiper结合使用。由于本项目是bootstrap框架,所以,关于前端的框架和插件,我个人认为,找到适合的自己使用且被市场容纳的。今年年后的工作中,我开始注重一些编码思想上的修正,工作真的让我成长了很多。哎呀呀~~回来回来。先说今儿的标题实现。
先引进来两个文件:
<link href="/css/swiper.min.css" rel="stylesheet">
<script src="/js/swiper.min.js"></script>
思路:
①:两个div,第一个div.tab > ul > li * 5 > a ; 第二个div > div * 5;
②:实现tab切换,这个可以用jquery 或者 swiper 都可以,在我用的是Jquery;
△△△△:重点在第二个div上,swiper 滑动有一个默认的类名swiper-container,这个一定要有。使用这个插件需要初始化swiper-container。
由于每一个tab-content请求的数据都不一样,总不能每一个tab-content都写一个swiper请求,这样做除了请求连接和参数不一样,其他代码都一样,会造成代码冗余,不管多谁(含开发者、使用者)来说,很不友好。
jquery实现tab切换大家都可以做得来,具体说下tab-content数据请求。
①:一进页面首次加载数据,函数: function firstLoad(url,tabId,indexContent){} ,调用这个函数,需要传(数据请求地址,请求的canotent 的 id,tab导航对应的contentDiv)
②:在上拉加载数据时,监测手指滑动事件;传值当前页数;发送请求;
③:swiper有监测手指滑动的事件:touchEnd(event),这是一个回调函数,触摸释放时执行,接受 touchend事件作为参数(释放即执行)。
④:在touchEnd函数中,需要获取两个高度:视图高度:_viewHeight;内容高度:_contentHeight;手指滑动的高度:mySwiper.translate
⑤:计算:用手指滑动的高度 和 视图与内容的高度差作比较
&&
手指滑动的高度要 < 0 (这个是为了判断是上拉?还是下滑?)
mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0
⑥:用 if……else if …… else 做分别传值,并用ajax请求数据
⑦:当请求的数据长度 data.list.length <= 0 时,数据加载完成。
具体代码如下,我会隐匿掉接口调用。\
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="author" content="静">
<meta name="copyright" content="静">
<title>tab请求数据</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/swiper.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/swiper.min.js"></script>
<style type="text/css">
html, body{height: 100%;font-family: "微软雅黑";}
*{margin: 0;padding: 0;box-sizing: border-box;}
a {color: #428bca;text-decoration: none;}
a:hover,a:focus {color: #2a6496;text-decoration: underline;}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
.padd_40{overflow-x:hidden;}
.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
.tab{display: flex;line-height: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
.tab a{width: 33.333333%;background: #fff;text-align: center;}
.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
.panel{margin: 0;}
.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
.swiper-container{overflow: visible;overflow-x:hidden}
.loadtip {display: block;text-align: center;color: #bcb2b2;border-top: 1px solid #ddd;position: fixed;bottom: 3%;background-color: #ffc16f;color: #fff;padding: 1%;border-radius: 16px;right: 4%;}
.swiper-container, .w{height: calc(100vh - 50px);}
.swiper-slide{height: auto;}
.text-center{text-align: center;}
.list-group{padding-left: 0;margin-bottom: 20px;}
.list-group-item{ position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
.list-group-item{height:200px;}
.product{padding:2%;border-bottom: 1px dashed #ccc;}
.swiper-wrapper{position: static;}
</style>
<script text/javascript>
$(function(){
//全部分类
firstLoad("allClass","1","divOne");
//农副特产
firstLoad("AAAA-Datasrc","1","divTwo");
//超市百货
firstLoad("BBBB-Datasrc","1","divThree");
//丽人美妆
firstLoad("CCCC-Datasrc","1","divFour");
//网红产品
firstLoad("DDDD-Datasrc","1","divFive");
//9.9专区
firstLoad("EEEE-Datasrc","1","divSix");
//首次加载数据
function firstLoad(url,tabId,indexContent){
$.ajax({
url: url,
type: "GET",
data: {
"pageNumber":1,
"pageSize":5,
"tabId":tabId
},
async:false,
success: function(data) {
console.log(data)
if(data.list.length > 0){
for(var i = 0; i<data.list.length;i++){
$("."+indexContent).append(data.list[i].name + data.list[i].productImage.source + data.list[i].name + data.list[i].price + data.list[i].maxCommission + data.list[i].hits);
}
$(".loadtip").html('上拉加载更多...');
}
}
})
}
//第一个tab分页
var pageNumOne = 2;
//第二个tab分页
var pageNumTwo = 2;
//第三个tab分页
var pageNumThree= 3;
//第四个tab分页
var pageNumFour= 4;
//第五个tab分页
var pageNumFive= 5;
//第六个tab分页
var pageNumSix= 6;
var mySwiper = new Swiper('.swiper-container',{ //初始化swiper
direction: 'vertical', //纵向滑动
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchEnd: function(swiper) {
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
// 上拉加载
if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
// console.log("已经到达底部!");
$(".loadtip").html('正在加载...');
var pageNum = 0;
var tabId = 0;
//判断操作的div
var divClass = $(".list-group").eq(mySwiper2.activeIndex).attr("class");
if(divClass.indexOf("divOne") != -1){
//全部分类
pageNum = pageNumOne;
tabId = "1"
} else if(divClass.indexOf("divTwo") != -1){
//AAAA
pageNum = pageNumTwo;
tabId = "1"
} else if(divClass.indexOf("divThree") != -1){
//BBBB
pageNum = pageNumThree;
tabId = "1"
} else if(divClass.indexOf("divFour") != -1){
//CCCC
pageNum = pageNumFour;
tabId = "1"
}
else if(divClass.indexOf("divFive") != -1){
//DDDD
pageNum = pageNumFive;
tabId = "1"
}
else if(divClass.indexOf("divSix") != -1){
//EEEE
pageNum = pageNumSix;
tabId = "1"
}
//拼接数据
$.ajax({
url: "src-src-src-src-src-src",
type: "GET",
data: {
"pageNumber":pageNum,
"pageSize":8, //每次请求的数据条数
"tabId":tabId
},
async:false,
success: function(data) {
console.log(data)
if(data.list.length > 0){
//判断操作的div
var divClass = $(".list-group").eq(mySwiper2.activeIndex).attr("class");
if(divClass.indexOf("divOne") != -1){
//全部分类
pageNumOne += 1;
} else if(divClass.indexOf("divTwo") != -1){
//AAAA
pageNumTwo += 1;
} else if(divClass.indexOf("divThree") != -1){
//BBBB
pageNumThree += 1;
} else if(divClass.indexOf("divFour") != -1){
//CCCC
pageNumThree += 1;
} else if(divClass.indexOf("divFive") != -1){
//DDDD
pageNumThree += 1;
} else if(divClass.indexOf("divThree") != -1){
//EEEE
pageNumThree += 1;
}
for(var i = 0; i<data.list.length;i++){
$(".list-group").eq(mySwiper2.activeIndex).append(data.list[i].name + data.list[i].productImage.source + data.list[i].name + data.list[i].price + data.list[i].maxCommission + data.list[i].hits);
}
$(".loadtip").html('上拉加载更多...');
mySwiper.update(); // 重新计算高度;
}else if(data.list.length <= 0){
$(".loadtip").html('没有更多啦!');
return false;
}
}
})
}
return false;
}
});
var mySwiper2 = new Swiper('.swiper-container2',{
onTransitionEnd: function(swiper){
$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
}
});
//tab切换
$('.tab a').click(function(){
$(this).addClass('active').siblings('a').removeClass('active');
mySwiper2.slideTo($(this).index(), 500, false)
$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});
});
</script>
</head>
<body class="padd_40">
<main>
<div class="tab">
<a class="active" href="javascript:;">全部</a>
<a href="javascript:;">AAAA</a>
<a href="javascript:;">BBBB</a>
<a href="javascript:;">CCCC</a>
<a href="javascript:;">DDDDD</a>
<a href="javascript:;">EEEE</a>
</div>
<div class="swiper-container" style="background-color: #fff;">
<div class="swiper-wrapper w">
<div class="swiper-slide d">
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide list-group divOne">
</div>
<div class="swiper-slide list-group divTwo">
</div>
<div class="swiper-slide list-group divThree">
</div>
<div class="swiper-slide list-group divFour">
</div>
<div class="swiper-slide list-group divFive">
</div>
<div class="swiper-slide list-group divSix">
</div>
</div>
</div>
</div>
</div>
<div class="loadtip">上拉加载更多</div>
<div class="swiper-scrollbar"></div>
</div>
</main>
</body>
</html>