![456](https://i-blog.csdnimg.cn/blog_migrate/b8f5b3e21487b9a03b4ade4d6fa39afc.png)
1.创建components组件,在tabbar页面引入该组件,附代码
<template>
<view class="tab-bar">
<view v-for="(item,index) in list" :key="index" :class="select === index? 'select' : 'tab-bar-item'" @click="switchTab(item, index)">
<view class="tab_text">{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
props:['select'],
data() {
return {
activeclass: 0,
color: "#333333",
selectedColor: "#333333",
list: [{
text: "首页"
}, {
text: "盆底肌健康科普"
}, {
text: "信息管理"
}],
switchPages:['../../pages/home/home','../../pages/healthy/healthy','../../pages/information/information']
}
},
methods: {
switchTab(item, index) {
uni.switchTab({
url: this.switchPages[index]
})
}
}
}
</script>
<style lang="less" scoped>
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom);
.select {
height: 100%;
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #00cc99;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 28rpx;
margin-top: 9rpx;
}
}
.tab-bar-item {
height: 100%;
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 28rpx;
margin-top: 9rpx;
}
}
}
</style>
2.父组件引入时传入activeclass值为该页面的序号,使之实现点击更改class样式
<template>
<tab-bar :select="activeclass"></tab-bar>
</template>
<script>
import tabBar from '@/components/tabBar/tabBar.vue'
export default {
components:{
tabBar
},
data(){
return{
activeclass: 1
}
}
}
</script>