mpvue微信小程序tab选项卡切换功能源码

源码：

<template>
<div class="box">
<div class="nav">
<div :class="{'selected':tab === 1,'title':true}"
class="default"
@click="changTab(1)">干垃圾
</div>
<div :class="{'selected':tab === 2,'title':true}"
class="default"
@click="changTab(2)">湿垃圾
</div>
<div :class="{'selected':tab === 3,'title':true}"
class="default"
@click="changTab(3)">可回收垃圾
</div>
<div :class="{'selected':tab === 4,'title':true}"
class="default"
style="border: 0"
@click="changTab(4)">有害垃圾
</div>
</div>
<div class="context">
<div v-if="tab===1">
<strong>111111</strong>
</div>
<div v-else-if="tab===2">
<strong>222222</strong>
</div>
<div v-else-if="tab===3">
<strong>333333</strong>
</div>
<div v-else>
<strong>444444</strong>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tab: 1
}
},
methods: {
changTab (index) {
this.tab = index
}
}
}
</script>

<style lang='stylus' scoped>
.box
width 750rpx
font-size 28rpx
.nav
display flex
display --webkit-flex
height 60rpx
line-height 60rpx
background-color #000
border-radius 10rpx
color #ffffff
div
flex auto
-webkit-flex auto
.title
text-align center
.selected
color #f3cc20
.default
border-right 1px solid #cdcdcd
.context
text-align center
font-size 50rpx
</style>

换个样式：

<template>
<div class="box">
<div class="nav">
<div :class="{'selected':tab === 1,'title':true}"
@click="changTab(1)">
<p>干垃圾</p>
</div>
<div :class="{'selected':tab === 2,'title':true}"
@click="changTab(2)">
<p>湿垃圾</p>
</div>
<div :class="{'selected':tab === 3,'title':true}"
@click="changTab(3)">
<p>可回收</p>
</div>
<div :class="{'selected':tab === 4,'title':true}"
@click="changTab(4)">
<p>有害垃圾</p>
</div>
</div>
<div class="context">
<div v-if="tab===1">
<strong>111111</strong>
</div>
<div v-else-if="tab===2">
<strong>222222</strong>
</div>
<div v-else-if="tab===3">
<strong>333333</strong>
</div>
<div v-else>
<strong>444444</strong>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tab: 1
}
},
methods: {
changTab (index) {
this.tab = index
}
}
}
</script>

<style lang='stylus' scoped>
.box
width 750rpx
font-size 28rpx
.nav
display flex
display -webkit-flex
height 60rpx
line-height 60rpx
color #353535
border-bottom 1rpx solid #e5e5e5
div
flex auto
-webkit-flex auto
.title
text-align center
.selected
color #07c160
p
width 70%
margin 0 15%
height 60rpx
line-height 60rpx
border-bottom 1rpx solid #07c160
.context
text-align center
font-size 50rpx
color #353535
</style>

参考文章：https://blog.csdn.net/weixin_38684316/article/details/89743658