main.vue
<template>
<view>
<index v-if="currentIndex === 0"></index>
<signup v-else-if="currentIndex === 1"></signup>
<test v-else-if="currentIndex === 2"></test>
<custom-tabbar ref="tabBarComponent" @changeItem="changeItem"></custom-tabbar>
</view>
</template>
<script>
import signup from './signup/signup.vue'
import test from './test.vue'
import index from './index.vue'
export default {
components: {
signup,
test,
index
},
data() {
return {
currentIndex: 0
}
},
methods: {
changeItem(item) {
this.currentIndex = item
}
}
}
</script>
<style scoped>
page{
background-color: #f6f7fb;
}
</style>
custom-tabbar
<template>
<view>
<van-tabbar :active="active" @change="onChange" :placeholder="true" active-color="#3856ff" inactive-color="#666666">
<van-tabbar-item v-for="(item, index) in list" :key="index" :icon="item.icon">
{
{
item.text }}
</van-tabbar-item>
</van-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
active: 0,
list: [
{
icon: 'home-o',
text: '首页',
url: '/pages/index'
},
{
icon: 'search',
text: '示例2',
url: '/pages/signup/signup'
},
{
icon: 'smile-o',
text: '示例3',
url: '/pages/test'
}
]
};
},
methods: {
onChange(event) {
this.active = event.detail;
this.$emit("changeItem",this.active);
// uni.switchTab({
// url: this.list[event.detail].url
// });
},
init() {
const pages = getCurrentPages();
const page = pages[pages.length - 1];
this.active = this.list.findIndex(item => item.url === `/${
page.route}`);
}
},
mounted() {
// this.init();
}
};
</script>
全部菜单放在一个界面使用v-if显示隐藏的做法是因为单独页面的话第一次切换下标菜单栏会闪烁（但是使用v-if又要自定义导航栏，就…挺离谱的）， 如果不使用这种v-if显示的话（单独页面）可以在每个菜单界面加上以下代码（会闪烁），如果大家有更好的方案可以交流一下
<!-- 引入组件，并添加 ref 属性 -->
<custom-tabbar ref="tabBarComponent"></custom-tabbar>
onShow() {
this.$refs.tabBarComponent.init();
},
// 解除下面的注释
// uni.switchTab({
// url: this.list[event.detail].url
// });
