引用的swiper 3.4.2版本
html部分
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide active-nav">未完成订单</div>
<div class="swiper-slide">已完成订单</div>
<div class="swiper-slide">取消订单</div>
</div>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<%-- 未完成订单 --%>
<div class="swiper-slide">
<div class="list_json">
<ul class="t_ul flex-max flex-hlr flex-sc">
<li class="l_li back_buy">出售</li>
<li class="c_li">
<p>USDT</p>
<p>2018-10-10 11:42:26</p>
</li>
<li class="r_li">请支付</li>
</ul>
<ul class="b_ul flex-max flex-hlr flex-sc">
<li>
<p>价格(CNY)</p>
<p>0.03</p>
</li>
<li>
<p>交易数量</p>
<p>1</p>
</li>
<li>
<p>总金额(CNY)</p>
<p>111</p>
</li>
</ul>
<div class="b_div">
<p>订单结束时间:2019-04-23 17:16:52</p>
<button type="button">确认支付</button>
</div>
</div>
</div>
<%-- 已完成订单 --%>
<div class="swiper-slide">
<div class="list_json">
<ul class="t_ul flex-max flex-hlr flex-sc">
<li class="l_li back_buy">出售</li>
<li class="c_li">
<p>USDT</p>
<p>2018-10-10 11:42:26</p>
</li>
<li class="r_li">请支付</li>
</ul>
<ul class="b_ul flex-max flex-hlr flex-sc">
<li>
<p>价格(CNY)</p>
<p>0.03</p>
</li>
<li>
<p>交易数量</p>
<p>1</p>
</li>
<li>
<p>总金额(CNY)</p>
<p>111</p>
</li>
</ul>
<div class="b_div">
<p>订单结束时间:2019-04-23 17:16:52</p>
</div>
</div>
</div>
<%-- 取消订单 --%>
<div class="swiper-slide">
<div class="kong_json">
<i class="img_sprites"></i>
<p>暂无更多数据</p>
</div>
</div>
</div>
</div>
css部分
.swiper1{
background: white;
margin: 1px 0;
.swiper-wrapper{
transition-duration: 0ms;
transform: translate3d(0, 0px, 0px);
.swiper-slide{
padding: rem(9px) 0;
color: #929292;
text-align: center;
font:{
size: rem(14px);
weight: 500;
}
}
.active-nav{
color: #3D7CFA;
border-bottom: rem(2px) solid #3D7CFA;
}
}
}
.swiper2{
}.swiper-wrapper{
transition-duration: 0ms;
transform: translate3d(0, 0px, 0px);
.swiper-slide{
.list_json{
background: white;
text-align: center;
margin-bottom: rem(6px);
.t_ul{
height: rem(63px);
position: relative;
box-shadow:0px 1px 7px 0px rgba(0,0,0,0.05);
overflow: hidden;
.l_li{
width: rem(150px);
height: rem(24px);
color: white;
position: absolute;
top: rem(12px);
left: rem(-54px);
transform: rotate(-46deg);
font:{
size: rem(14px);
weight: 500;
}
}
.c_li{
margin: 0 auto;
font:{
size: rem(14px);
weight: 500;
}
p:nth-child(1){
color: #303030;
span{
color: #929292;
font-size: rem(12px);
margin-left: rem(6px);
}
}
p:nth-child(2){
color: #838383;
}
}
.r_li{
position: absolute;
right: rem(12px);
top: rem(22px);
font-size: rem(14px);
a{
color: #3D7CFA;
}
}
.back_buy{
background: #D60000;
}
}
.b_ul{
padding: rem(8px) rem(12px);
font-size: rem(12px);
li{
width: 33.33%;
p:nth-child(1){
color: #929292;
padding-bottom: rem(4px);
}
}
li:nth-child(1){
text-align: left;
}
li:nth-child(2){
padding: 0 rem(8px);
}
li:nth-child(3){
text-align: right;
}
}
.b_div{
text-align: center;
border-top: 1px solid #FDFDFD;
p{
color: #6C6C6C;
font-size: rem(12px);
padding: rem(8px) 0 rem(10px);
}
button{
margin-bottom: rem(8px);
padding: 0 rem(36px);
height: rem(30px);
font-size: rem(14px);
background: #3D7CFA;
color: white;
border: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
}
}
}
}
js部分
//tab切换
var swiper1 = new Swiper('.swiper1',{
watchSlidesProgress : true,
watchSlidesVisibility : true,//如果开启了watchSlidesVisibility，则会在每个可见slide增加一个classname，默认为'swiper-slide-visible'
slidesPerView : 3,//将tabs块儿平均分成几份
/*点击了上面的滑块时，下面的内容区也跟着变化 若去掉后，拖动下面上面可继续移动*/
onTap: function(){
swiper2.slideTo( swiper1.clickedIndex)
}
})
var swiper2 = new Swiper('.swiper2',{
onSlideChangeStart: function(){
updateNavPosition()
}
})
function updateNavPosition(){
//默认哪一块是被选中的状态
$('.swiper1 .active-nav').removeClass('active-nav')
var activeNav = $('.swiper1 .swiper-slide').eq(swiper2.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
if (activeNav.index()>swiper1.activeIndex) {
var thumbsPerNav = Math.floor(swiper1.width/activeNav.width())-1
swiper1.slideTo(activeNav.index()-thumbsPerNav)
}
else {
swiper1.slideTo(activeNav.index())
}
}
}
网友评论