这是在日常开发过程中常见的选项卡(带滑动切换效果),小白一枚，不足之处还望体谅，包涵，这也是第一次尝试写博客，以后会继续分享一些工作中的问题与收获。
实现效果：
点击上方导航，当前导航添加样式，下方内容滑动切换，滑动下方内容上面导航切换。
第一步：静态布局
html：
<div id="lao" class="warp">
<!--导航-->
<div class="navList">
<ul>
<li v-for="(myliebiaoList,index) in myList">
{{myliebiaoList.name}}
</li>
</ul>
</div>
<!--内容-->
<div class="mainContent">
<div v-for="lunbo in myContent" >{{lunbo.name}}</div>
</div>
</div>
js：
<script src="./dist/js/vue.js"></script> //引入vue.js
<script type="text/javascript">
var vm = new Vue({
el: '#lao',
data: {
myList: [
{
name: '吃'
},
{
name: '大'
},
{
name: '白'
},
{
name: '菜'
},
{
name: '的'
},
{
name: '熊'
}
], //存放类型列表
myContent: [
{
name: '吃'
},
{
name: '大'
},
{
name: '白'
},
{
name: '菜'
},
{
name: '的'
},
{
name: '熊'
}
] //存放内容列表
}
})
</script>
基本的上下结构静态页面布局已经有了。
第二步：点击当前上方导航添加样式
利用vue中的v-bind实现：
给li标签绑定class： <li :class="{myColor:index==isActive}" @click="liseGo(index)" v-for="(myliebiaoList,index) in myList">
{{myliebiaoList.name}}
</li>
在style中定义：myColor {
background: turquoise;
color: white;
}
在js中添加点击事件：liseGo(index) {
this.isActive = index;
}
isActive在data中声明为0，默认给第一个导航添加样式(通过v-for遍历的，下标从0开始)
这个时候点击上方当前导航的时候是可以实现添加样式。
第三步：点击下方内容滑动切换
注：使用swiper实现内容左右滑动
1.引入下载好的swiper
<script src="./dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="./dist/css/swiper.min.css">
/*可自行去swiper官网下载*/
2.参照官方使用方法，改变下方内容布局
//这是下方内容盒子
<div class="mainContent">
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for="lunbo in myContent" class="swiper-slide">{{lunbo.name}}</div>
</div>
</div>
</div>
3.写入对应的js
//在methods中封装一个swiper方法
1. getSwiper() {
// swiper-container class名称
this.mySwiper = new Swiper('.swiper-container', {
autoplay: false, //可选选项，自动滑动
})
}
//direction: 'vertical', // 垂直切换选项 (可自己选择垂直还是左右滑动)
2.在钩子函数:mounted中调用封装的方法
mounted() {
// 初始化swiper
this.getSwiper();
}
这个时候下方内容效果实现了，可以左右滑动切换
上方导航点击当前有样式，下方内容也可以滑动切换，下面要做的就是把导航跟内容关联起来
第四步：点击上方导航下方内容滑动切换
参照swiper官方文档api，有个方法控制Swiper切换到指定slide。
使用方法：mySwiper.slideTo(index, speed, runCallbacks)
| index |
num |
必选 |
指定将要切换到的slide的索引 |
| speed |
num |
可选 |
切换速度(单位ms) |
| runCallbacks |
boolean |
可选 |
设置为false时不会触发transition回调函数 |
在点击事件中添加该方法:
liseGo(index) {
this.isActive = index;
this.mySwiper.slideTo(index, 500, false); //切换到第index个slide，速度为0.5秒
}
添加该方法后，点击上方导航，下面内容是可以实现滑动切换指定内容的。
最后一步：左右滑动下方内容，上方导航跟着切换
一样参照官方api文档，找到方法：slideChangeTransitionStart //回调函数，swiper从当前slide开始过渡到另一个slide时执行
用法：on: {
slideChangeTransitionStart: function(){
//在回调中写入逻辑处理
that.isActive = this.activeIndex;
//一定要重新声明this指向，因为该方法中的this.activeIndex指向的是swiper实例本身，而isActive则指向的是vue实例本身
}
}
//输出的activeIndex是过渡后的slide索引。
这样基于vue+swiper实现点击上方导航，下面内容滑动切换，滑动下方内容，上方导航自动切换的效果就大功告成了！
第一次写博客，不足之处多多体谅。
附全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动态切换</title>
<link rel="stylesheet" href="./dist/css/swiper.min.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
font-size: 24px;
}
.warp {
width: 100%;
height: 100vh;
background: white;
}
ul {
display: -webkit-box;
overflow-x: scroll;
white-space: nowrap;
}
ul>li {
width: 62.5px;
text-align: center;
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
height: 50px;
line-height: 50px;
border: 1px solid #c3c3c3;
text-align: center;
}
.navList {
overflow: hidden;
}
.swiper-wrapper>div:nth-child(1) {
height: 150px;
line-height: 150px;
background: pink;
text-align: center;
}
.swiper-wrapper>div:nth-child(2) {
height: 150px;
line-height: 150px;
background: blanchedalmond;
text-align: center;
}
.swiper-wrapper>div:nth-child(3) {
height: 150px;
line-height: 150px;
background: seagreen;
text-align: center;
}
.swiper-wrapper>div:nth-child(4) {
height: 150px;
line-height: 150px;
background: blue;
text-align: center;
}
.swiper-wrapper>div:nth-child(5) {
height: 150px;
line-height: 150px;
background: lawngreen;
text-align: center;
}
.swiper-wrapper>div:nth-child(6) {
height: 150px;
line-height: 150px;
background: purple;
text-align: center;
}
.myColor {
background: turquoise;
color: white;
}
</style>
</head>
<body>
<div id="lao" class="warp">
<!--导航-->
<div class="navList">
<ul>
<li :class="{myColor:index==isActive}" @click="liseGo(index)" v-for="(myliebiaoList,index) in myList">
{{myliebiaoList.name}}
</li>
</ul>
</div>
<!--内容-->
<div class="mainContent">
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for="lunbo in myContent" class="swiper-slide">{{lunbo.name}}</div>
</div>
</div>
</div>
</div>
</body>
<script src="./dist/js/vue.js"></script>
<script src="./dist/js/swiper.min.js"></script>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#lao',
data: {
mySwiper: '',
isActive: 0,
age: '',
msg: '啊哈哈',
myList: [
{
name: '吃'
},
{
name: '大'
},
{
name: '白'
},
{
name: '菜'
},
{
name: '的'
},
{
name: '熊'
}
], //存放类型列表
myContent: [
{
name: '吃'
},
{
name: '大'
},
{
name: '白'
},
{
name: '菜'
},
{
name: '的'
},
{
name: '熊'
}
] //存放内容列表
},
methods: {
liseGo(index) {
this.isActive = index;
this.mySwiper.slideTo(index, 500, false); //切换到第index个slide，速度为0.5秒
},
//封装swiper
getSwiper() {
var that = this;
// swiper-container class名称
this.mySwiper = new Swiper('.swiper-container', {
autoplay: false, //可选选项，自动滑动
on: {
slideChangeTransitionEnd: function() {
// this指向的是当前的swiper实例，that指向的是vue实例
that.isActive = this.activeIndex; //切换结束时，告诉我现在是第几个slide
},
},
})
}
},
mounted() {
// 初始化swiper
this.getSwiper();
}
})
</script>
