1-Tab滑动选项卡
2019-05-24 本文已影响0人
波克比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab滑动选项卡</title>
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<style>
html,body{ touch-action: none; }
ul{ list-style: none;}
.navlist {
width: 100%;
height: 40px;
border-bottom: 1px solid rgba(151, 151, 151, 0.1);
position: relative;
}
.navli {
padding: 10px 0px;
text-align: center;
float: left;
margin: 0 1.2rem;
}
.navli i {
font-style: normal;
font-size: 16px;
}
.activeT {
color: #00ba6b;
padding-bottom: 0.3rem;
border-bottom: 2px solid #00ba6b;
}
.swiper_con {
width: 100%;
margin-bottom: 40px;
position: relative;
}
.choosegrand {
position: absolute;
top: -3;
right: 0;
}
.show {
display: block;
}
.none {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div class="navlist">
<ul>
<li
class="navli"
v-for="(item,index) in navList"
:class="{'activeT':nowIndex===index}"
@click="tabClick(index)"
>
<i>{{ item.name }}</i>
</li>
</ul>
</div>
<div class="swiper-container swiper_con">
<div class="swiper-wrapper">
<!-- 第一个swiper -->
<div class="swiper-slide" ref="viewBox">1111</div>
<!-- 第二个swiper -->
<div class="swiper-slide">2222</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
navList: [{ name: "滑动选项标题1" }, { name: "滑动选项标题2" }],
nowIndex: 0
},
mounted() {
var that = this;
that.mySwiper = new Swiper(".swiper-container", {
initialSlide: 0,
autoplay: false,
keyboardControl: true,
autoHeight: true,
observer: true,
observeParents: true,
on: {
slideChangeTransitionStart: function(){
//console.log(that.mySwiper.activeIndex);
that.nowIndex = that.mySwiper.activeIndex;
},
},
});
},
methods: {
tabClick(index) {
this.nowIndex = index;
this.mySwiper.slideTo(index, 1000, false);
}
},
});
</script>
</html>
