vue.js 实现tab栏切换
看一下常见的tab栏切换的场景:根据上面的例子分析tab栏主要结构:首先有三个按钮，当前选中的按钮有样式。比如一个为选中的，那么第一个为高亮状态。三个按钮分别为图片，专栏，热点每当你点击的时候，下面的tab栏会有对应的内容切换。当你点击图片，图片的按钮有高亮的状态，下面的内容会显示图片的内容，当你点击专栏，专栏的按钮会有高亮的状态，下面会显示专栏的内容。当你点击热点，热点的按钮会...
看一下常见的tab栏切换的场景:
根据上面的例子分析tab栏主要结构:
首先有三个按钮，当前选中的按钮有样式。比如一个为选中的，那么第一个为高亮状态。
三个按钮分别为图片，专栏，热点
每当你点击的时候，下面的tab栏会有对应的内容切换。
当你点击图片，图片的按钮有高亮的状态，下面的内容会显示图片的内容，
当你点击专栏，专栏的按钮会有高亮的状态，下面会显示专栏的内容。
当你点击热点，热点的按钮会有高亮的状态，下面的内容会显示热点的内容
上例子:
<template>
<div class="container">
<div class="btns">
<span>图片</span>
<span>专栏</span>
<span>热点</span>
</div>
<br>
<div>
<p>图片</p>
<p>图片</p>
<p>图片</p>
<p>图片</p>
</div>
<div>
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
</div>
<div>
<p>热点</p>
<p>热点</p>
<p>热点</p>
<p>热点</p>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped lang="less">
.container{
padding:30px;
.btns{
margin-bottom: 10px;
span{
cursor: pointer;
border:1px #ddd solid;
float: left;
}
}
}
</style>
把专栏和热点部分的内容隐藏,给需要隐藏的部分添加v-if=”false”
<template>
<div class="container">
<div class="btns">
<span>图片</span>
<span>专栏</span>
<span>热点</span>
</div>
<br>
<div>
<p>图片</p>
<p>图片</p>
<p>图片</p>
<p>图片</p>
</div>
<div v-if="false">
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
</div>
<div v-if="false">
<p>热点</p>
<p>热点</p>
<p>热点</p>
<p>热点</p>
</div>
</div>
</template>
设置v-if=”false”虽然可以把专栏和热点的内容隐藏了，但是这样的方式是一直隐藏，无法更改。我们的tab栏切换的内容需要变化的，这样的方式不适合。
可以通过变量的方式来实现。
<script>
export default {
data(){
return{
//tab栏的核心是当前下标的变量
current:0
}
}
}
</script>
在这里设置下标为0，就因为tab的第一个按钮为0，第二个按钮为1，三个按钮为2.
点击图片的时候是0，点击专栏的时候是1，点击热点的时候是2.
在点击按钮，显示对应内容的进行判断上，比如第一个按钮。v-if=”current === 0”。
<template>
<div class="container">
<div class="btns">
<span>图片</span>
<span>专栏</span>
<span>热点</span>
</div>
<br>
<div v-if="current === 0">
<p>图片</p>
<p>图片</p>
<p>图片</p>
<p>图片</p>
</div>
<div v-if="current === 1">
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
</div>
<div v-if="current === 2">
<p>热点</p>
<p>热点</p>
<p>热点</p>
<p>热点</p>
</div>
</div>
</template>
当点击图片按钮的时候，下标是0，图片部分的内容显示，其他两部分的内容隐藏。
当点击专栏按钮的时候，下标为1，专栏部分的内容显示，其他两部分的内容隐藏。
当点击热点按钮的时候，下标为1，热点部分的内容显示，其他两部分的内容隐藏。
因此，我们要给点击按钮添加点击事件。
<div class="btns">
<span @click="handleClick">图片</span>
<span @click="handleClick">专栏</span>
<span @click="handleClick">热点</span>
</div>
上面是一种方式，在这里不需要每一个按钮都添加按钮，可以通过遍历的方式添加。
先用v-for进行遍历，而v-for需要接收数组才可以循环,这里没有数组。可以在v-for里面直接写数组
<span
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
>
</span>
把遍历的按钮显示出来，效果和之前的是一样的
<span
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
>
{{item}}
</span>
给遍历的按钮添加事件
<span
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick"
>
</span>
添加handleClick方法，在点击时候改变current，怎么得到current值???
methods:{
//点击的时候改变current
handleClick(){
this.current =
}
}
可以通过在span里把index值传过来，给handleClick使用
<span
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick(index)"
>
</span>
methods:{
//点击的时候改变current
handleClick(index){
this.current = index;
}
}
代码：
<template>
<div class="container">
<div class="btns">
<!--
<span>图片</span>
<span>专栏</span>
<span>热点</span>
-->
<!--加上 :key="index" 主要是方便数组遍历比较-->
<span v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick(index)"
>{{item}}</span>
</div>
<br>
<div v-if="current === 0">
<p>图片</p>
<p>图片</p>
<p>图片</p>
<p>图片</p>
</div>
<div v-if="current === 1">
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
</div>
<div v-if="current === 2">
<p>热点</p>
<p>热点</p>
<p>热点</p>
<p>热点</p>
</div>
</div>
</template>
<script>
export default {
data(){
return{
//tab栏的核心是当前下标的变量
current:0
}
},
methods:{
//点击的时候改变current
handleClick(index){
this.current = index;
}
}
}
</script>
<style scoped lang="less">
.container{
padding:30px;
.btns{
margin-bottom: 10px;
span{
cursor: pointer;
border:1px #ddd solid;
float: left;
}
}
}
</style>
运行结果：
给当前的点击状态添加高亮状态
直接添加class="active"三个按钮都添加上样式，
<style scoped lang="less">
.container{
padding:30px;
.btns{
margin-bottom: 10px;
span{
cursor: pointer;
border:1px #ddd solid;
float: left;
}
.active{
color:red;
border-color: red;
}
}
}
</style>
<span
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick(index)"
class="active">{{item}}</span>
这种方式不对。正确的方式是给当前点击的按钮加上，这个按钮应该加上是动态的class。
判断一个元素是否添加样式，需要通过对象的方式进行判断。对象前面的key是你要加样式的类名，
后面的类名为true时就加上样式，
:class="{
active:true
}"
后面的类名为false时，就不加上样式
:class="{
active:false
}"
要满足什么的条件才为true???
当active：index === current 时，active的值为true。
当v-for第一次循环的时候，index为0，而urrent的值0，因此active：0 === 0，active的值为true，图片的按钮成立，于是给图片加上active的样式，
当v-for第二次循环的时候，index为1，而 urrent的值0，因此active：1 === 0，active的值为false，专栏的按钮不成立，于是不给专栏加上active的样式
当v-for第三次循环的时候，index为2，而 urrent的值0，因此active：2 === 0，active的值为false，热点的按钮不成立，于是不给热点加上active的样式
上面的结果是当点击图片按钮的时候，图片加上样式，而专栏和热点不加上样式。
代码：
<template>
<div class="container">
<div class="btns">
<!--
<span>图片</span>
<span>专栏</span>
<span>热点</span>
-->
<!--加上 :key="index" 主要是方便数组遍历比较-->
<span v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick(index)"
:class="{active:index === current}">{{item}}</span>
</div>
<br>
<div v-if="current === 0">
<p>图片</p>
<p>图片</p>
<p>图片</p>
<p>图片</p>
</div>
<div v-if="current === 1">
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
<p>专栏</p>
</div>
<div v-if="current === 2">
<p>热点</p>
<p>热点</p>
<p>热点</p>
<p>热点</p>
</div>
</div>
</template>
<script>
export default {
data(){
return{
//tab栏的核心是当前下标的变量
current:0
}
},
methods:{
//点击的时候改变current
handleClick(index){
this.current = index;
}
}
}
</script>
<style scoped lang="less">
.container{
padding:30px;
.btns{
margin-bottom: 10px;
span{
cursor: pointer;
border:1px #ddd solid;
float: left;
}
.active{
color:red;
border-color: red;
}
}
}
</style>
输出结果：
以上就是通过vue.js的方式实现tab栏的切换。
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)