TAB切换功能：既可以滑动又可以点击。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<style>
*{box-sizing: border-box;margin: 0;padding: 0;}
body{background-color: #f8f9fc;}
.case-title{border-bottom: 1px solid #ddd;background-color: #fff;}
.swiper-slide.case-tab{width: 150px;line-height: 50px;text-align: center;font-size: 16px;}
.swiper-slide.case-tab.active-nav{color: #fd7b03}
.swiper-slide.container{padding: 10px;height: 260px}
.case-detail{height:100%;box-shadow: 0 3px 8px #ccc;padding: 10px 0 20px;background-color: #fff;}
.case-name{font-size: 16px;color: 333;padding: 10px 15px}
.case-des{color: #999;padding: 0 30px;}
.swiper-slide.show-more{height:260px;display: flex;justify-content: center;align-items: center;color: #999}
.vertical-text{width: 20px;display: inline-block;vertical-align: middle;}
.icon-slide-more{display: inline-block;vertical-align: middle;font-style: normal;}
</style>
</head>
<body>
<div>
<div class="swiper-container case-title" id="caseTitle" >
<div class="swiper-wrapper">
<div class="case-tab swiper-slide active-nav">主题</div>
<div class="case-tab swiper-slide">取景</div>
<div class="case-tab swiper-slide">要素</div>
</div>
</div>
<div id="caseContainer" style="width:100%">
<div class="swiper-wrapper">
<div class="swiper-slide container">
<div class="case-detail">
<h2 class="case-name">风景</h2>
<p class="case-des">最普遍的摄影题材</p>
<h2 class="case-name">人像</h2>
<p class="case-des">最亲民的，没有之一</p>
<h2 class="case-name">人文</h2>
<p class="case-des">与人文相关的题材总容易引起共鸣</p>
</div>
</div>
<div class="swiper-slide container">
<div class="case-detail">
<h2 class="case-name">场景</h2>
<p class="case-des">直接影响照片好坏</p>
<h2 class="case-name">角度</h2>
<p class="case-des">换个角度看世界</p>
<h2 class="case-name">取舍</h2>
<p class="case-des">摄影是减法</p>
</div>
</div>
<div class="swiper-slide container">
<div class="case-detail">
<h2 class="case-name">构图</h2>
<p class="case-des">横向构图，三分构图，框式构图</p>
<h2 class="case-name">曝光</h2>
<p class="case-des">基本功</p>
<h2 class="case-name">虚实</h2>
<p class="case-des">突出主体，丰富层次</p>
</div>
</div>
<div class="swiper-slide container show-more" style="width: 100px">
<div class="slide-more">
<p class="vertical-text">左滑查看更多</p>
<i class="icon-slide-more">>></i>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
let swiper1 = new Swiper('#caseTitle',{
watchSlidesProgress : true, //开启这个参数来计算每个slide的progress(进度),以便判断是否最后一帧
watchSlidesVisibility : true, //为每个可见的slide增加一个classname：‘ swiper-slide-visible ’
slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量，'auto'则自动根据slides的宽度来设定数量
freeMode: true, //为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合
on:{
tap: function(){ //点击 tab 时，跳转相应的内容页
swiper2.slideTo( swiper1.clickedIndex)
}
}
})
let swiper2 = new Swiper('#caseContainer',{
slidesPerView: 'auto', // 最后一帧宽度小，故设为自动识别
on:{
slideChangeTransitionStart: function(){ //内容页开始滑动时 响应导航栏
updateNavPosition()
},
touchEnd: function(){
//左滑查看更多
let prg = this.progress //进度
let index = this.snapIndex, //当前序号
length = this.slides.length-1 //内容页 页数-1
if(prg>1 && index===length){ //判断处于最后一帧，且进度超过 1 (倒数第二帧滑动时也可能使进度超过1)
// do something
slideMore()
}
},
}
})
function updateNavPosition(){
let pages = parseInt($('#caseTitle .swiper-slide').length) //导航栏数量
let currentContextIndex = swiper2.activeIndex //内容页活动页
let to = currentContextIndex>=pages?pages-1:currentContextIndex //内容页3,4页活动时都跳转至 导航栏的3页
$('#caseTitle .active-nav').removeClass('active-nav')
$('#caseTitle .swiper-slide').eq(to).addClass('active-nav');
swiper1.slideTo(to)
}
function slideMore(){
console.log('到底了！')
}
})
</script>
</html>
网友评论文明上网理性发言 已有0人参与
发表评论: