1.修改pages.json文件中tabbar内容:
只需要添加"custom":true,//自定义tabbar即可
2.创建组件tabbar
<template>
<view class="tabbar">
<view v-for="(item, index) in tabbarList" :key="index" class="tabbar-item" @click="switchTab(index)">
<text :class="{active: index === currentIndex}">{{item.text}}</text>
</view>
</view>
</template>
<script>
export default {
props: {
currentIndex: Number
},
data(){
return{
tabbarList: [
{ text: '首页', icon: '', activeIcon: '' },
{ text: '店铺', icon: '', activeIcon: '' },
{ text: '购物车', icon: '', activeIcon: '' },
{ text: '我的', icon: '', activeIcon: '' }
],
}
},
methods: {
switchTab(index) {
this.$emit('switchTab', index);
}
}
}
</script>
<style scoped>
.tabbar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
height: 80px;
border-top: 1px solid #999;
}
.tabbar-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tabbar-item text {
padding: 5px;
font-size: 14px;
color: #333;
}
.tabbar-item text.active {
color: #09BB07;
}
</style>
3.引用组件
在首页引用组件
<template>
<view class="content">
<tabBar :currentIndex="currentIndex" @switchTab="switchTab"></tabBar>
</view>
</template>
<script>
import tabBar from '@/components/tabBar/tabBar.vue'
export default {
components:{
tabBar
},
data() {
return {
currentIndex: 0
}
},
created() {},
onLoad() {},
methods: {
switchTab(index) {
this.currentIndex = index;// 根据index切换对应的页面
}
}
}
</script>
<style>
</style>