1、首先在page.json中不用再定义tabbar属性
2、在components文件中自定义一个tabbar组件,这里也可以引用uview-ui中的tabbar底部导航栏,我这里就是引用的uview-ui中的tabbar。
3、pages中的4个主页面,分别为Home(首页)、Work(工作)、Message(消息)、My(我的),再创建一个总页面index,将Home、Work、Message、My分别引入到Index总页面,相当于将这4个主页面作为总页面的组件,同时再总页面Index中引入自定义的tabbar标签,这样可以控制对4个主页面的切换,我之前再网上耶看过很多,感觉比较繁琐,所以自己想了一个这种方式实现自定义的tabbar底部导航栏。
4、代码分享如下:
首先是自己引用的tabbar底部导航栏,具体使用查看uview-ui
<template>
<view>
<u-tabbar :value="name" :fixed="true" :placeholder="false" activeColor="#d81e06"
:safeAreaInsetBottom="false" :activeColor="'#F85252'" :inactiveColor="'#BFBFBF'">
<u-tabbar-item text="首页" name="Home" @click="goPage('Home')" >
<image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/shouye @2x.png' | getStaticUrl"
style="width: 50rpx; height: 50rpx;"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/shouye @2x.png'| getStaticUrl"
style="width: 50rpx; height: 50rpx;">
</image>
</u-tabbar-item>
<u-tabbar-item text="工作" name="Work" @click="goPage('Work')">
<image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/gongzuo@2x.png' | getStaticUrl"
style="width: 50rpx; height: 50rpx;"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/gongzuo@2x.png' | getStaticUrl "
style="width: 50rpx; height: 50rpx;">
</image>
</u-tabbar-item>
<u-tabbar-item text="消息" name="Message" @click="goPage('Message')">
<image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/xiaoxi@2x.png'| getStaticUrl "
style="width: 50rpx; height: 50rpx;"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/xiaoxi@2x.png' | getStaticUrl "
style="width: 50rpx; height: 50rpx;">
</image>
</u-tabbar-item>
<u-tabbar-item text="我的" name="Mine" @click="goPage('Mine')">
<image class="u-page__item__slot-icon" slot="active-icon" :src="'/static/active-icon/wode@2x.png' | getStaticUrl "
style="width: 50rpx; height: 50rpx;"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="'/static/icon/wode@2x.png' | getStaticUrl"
style="width: 50rpx; height: 50rpx;">
</image>
</u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
props: {
name: String
},
methods:{
goPage(name){
this.$emit('changtab', name)
}
}
}
</script>
<style lang="scss" scoped>
第二创建总页面Index,然后引入自己写好的4个主页面(home\work\message\my)代码如下:
<template>
<view class="index-container">
<view class="index-content">
<Home v-if="pageFlag === 'Home'" @click="changtab()"></Home>
<Message v-else-if="pageFlag === 'Message'"></Message>
<Mine v-else-if="pageFlag === 'Mine'"></Mine>
<Work v-else-if="pageFlag === 'Work'"></Work>
</view>
<tabBar :name="pageFlag" @changtab="changtab()"></tabBar>
</view>
</template>
<script>
import Mine from '../my/my.vue';
import Home from "../home/home.vue";
import Message from "../message/message.vue";
import Work from "../worklist/worklist.vue";
export default {
components: {
Mine,
Home,
Message,
Work
},
data: () => ({
pageFlag: 'Home'
}),
methods: {
changtab(name) {
this.pageFlag = name;
},
}
}
</script>
<style>
</style>
总页面和4个主页面都是在pages文件夹下创建的,希望对大家有所帮助,不足之处请指教