uniapp+uView2.0实现自定义动态tabbar

1.需求说明

 要求不同时间显示不同的tabbar.点击不同的tabbar跳转到不同的页面,能随时实现tabbar显示个数的切换。一种是只需要显示首页、我的页面；另一种是显示首页、消息、我的页面。效果图如下：![在这里插入图片描述](https://img-blog.csdnimg.cn/8d11f52b480b462794d7dbd6bd527882.png)

2.实现原理说明

 基于uview2.0的u-tabbar实现自定义tabbar，使用vuex实现tabbar显示状态数据共享。首页和我的页面初始化时调用后端接口获取当前tabbar状态,根据不同的状态控制页面显示两个还是显示三个tabbar.

3.实现过程

3.1集成uView2.0

 Hbuilder导入插件,uniapp插件市场搜索:uView2.0

uni.scss中添加如下:

// 导入uView全局scss变量文件
@import "./uni_modules/uview-ui/theme.scss";

main.js中添加如下:

// 引入全局uView
import uView from './uni_modules/uview-ui'
Vue.use(uView)

3.2.自定义tabbar

自定义组件:custom-tabbar

<template><view ><u-tabbar
        :value="tabbarIndex":fixed="true":safeAreaInsetBottom="true":placeholder="true"><u-tabbar-item  v-for="(tabbarItem,index) in tabbar":key="index":text="tabbarItem.text" @click="switchTo()"><image
                    class="image_class"
                    slot="active-icon":src="tabbarItem.selectedIconPath"></image><image
                    class="image_class"
                    slot="inactive-icon":src="tabbarItem.iconPath"></image></u-tabbar-item></u-tabbar></view></template><script>
    import {
            mapState
        } from 'vuex';
    export default{
        name:"custom-tabbar",data(){return{
                tabbar:[]// tabbar信息};},
        computed:mapState({
                    tabbarIndex:'tabbarIndex',
                    tabbarList:'tabbarList'}),// 自定义组件中属性
        props:['tabbarState'],created(){// 模拟调用服务端接口,显示首页和我的页面if(this.tabbarState ==1){const storeTabbar=this.$store.state.tabbarList;
                        this.tabbar = this.tabbar.concat(storeTabbar[0]).concat(storeTabbar[2]);}// 模拟调用服务端接口,显示首页、消息和我的页面if(this.tabbarState ==2){
                        this.tabbar = this.$store.state.tabbarList;}},
        methods:{// 页面跳转switchTo(event){
                wx.switchTab({
                    url: this.tabbar[event].pagePath,
                    success:()=>{
                        this.$store.state.tabbarIndex = event
                    }})}},}</script><style lang="scss">.image_class{
    width:50rpx;
    height:50rpx;}</style>

3.3.vuex定义tabbar共享信息

项目根目录下创建storage文件夹,然后创建index.js.内容如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({// 这个代表全局可以访问数据对象，就像是咱们在组件中声明的 data 属性，区别在于data中数据为组件私有，这里state为项目全局共享。
    state:{// 自定义tabbar索引
        tabbarIndex:0,// tabbar信息
        tabbarList:[{
                            iconPath:"/static/index.png",
                            selectedIconPath:"/static/index_select.png",
                            text:'首页',
                            count:2,
                            isDot: true,
                            pagePath:"/pages/index/index"},{
                            iconPath:"/static/message.png",
                            selectedIconPath:"/static/message_select.png",
                            text:'消息',
                            midButton: true,
                            pagePath:"/pages/news/news"},{
                            iconPath:"/static/mine.png",
                            selectedIconPath:"/static/mine_select.png",
                            text:'我的',
                            pagePath:"/pages/mine/mine"},]},// 这个实时监听 state 内的数据对象变化，类似 咱们组件中的 computed 属性，会依赖 state 数据变化而变化
    getters:{},// 用来同步设置 state 的值
    mutations:{},// 通过提交 mutations 内部的方法，异步更新 state 的状态，官方推荐都使用这种方法比较合适
    actions:{}})
export default store

main.js中引入storage信息

// 引入 store 
import store from '@/store/index.js'
Vue.prototype.$store = store

const app = new Vue({...App,
    store
})

page.json中设置tabbar路径,否则调用wx.switchTab方法不生效(仅针对于tabbar页面实现跳转)

"tabBar":{"custom": true,"list":[{"pagePath":"pages/index/index"},{"pagePath":"pages/news/news"},{"pagePath":"pages/mine/mine"}]}

3.4 tabbar显示个数控制

以下代码中通过手动修改tabbarState模拟调用服务端接口查询状态.首页与我的页面需要动态获取,消息页面固定显示三个tabbar设置即可.

我的页面:

<template><view><view>我的页面</view><view><!-- 自定义tabbar --><custom-tabbar :tabbarState='tabbarState'></custom-tabbar></view></view></template><script>
    export default{data(){return{
                tabbarState:3//tabbar显示个数 1.显示2个;2.显示3个};},created(){// 控制tabbar显示个数 1.显示2个;2.显示3个
            this.tabbarState=1;
            console.log("首页状态:"+this.tabbarState)}}</script><style lang="scss"></style>

首页:

<template><view class="content"><image class="user_img":src="userImg"></image><view class="nick_class"><text class="title">昵称:</text><input type="nickname" class="weui-input" placeholder="请输入昵称"/></view><view><!-- 自定义tabbar --><custom-tabbar :tabbarState='tabbarState'></custom-tabbar></view></view></template><script>
    export default{data(){return{
                userImg:"../../static/logo.png",
                tabbarState:3//tabbar显示个数 1.显示2个;2.显示3个}},created(){// 控制tabbar显示个数 1.显示2个;2.显示3个
            this.tabbarState=1;
            console.log("首页状态:"+this.tabbarState)},
        methods:{}}}</script><style>.content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;}.user_img {
        height:200rpx;
        width:200rpx;
        margin-top:200rpx;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:50rpx;}.text-area {
        display: flex;
        justify-content: center;}.title {
        font-size:36rpx;
        color: #8f8f94;}.nick_class{
        display: flex;
        flex-direction: row;}</style>

消息页面:

<template><view><view>消息页面</view><view><!-- 自定义tabbar --><custom-tabbar tabbarState=2></custom-tabbar></view></view></template><script>
    export default{data(){return{
                value1:0};},
        methods:{}}</script><style lang="scss"></style>

补充:
可以直接在自定义tabbar中请求渲染之前设置tabbar信息:

beforeCreate(){// 调用接口findTabbarSetting({}).then((res)=>{if(res.Flag){
                this.tabbar = this.$store.state.tabbarList;
                console.log("显示三个"+JSON.stringify(this.tabbar))}else{const storeTabbar=this.$store.state.tabbarList;
                this.tabbar = this.tabbar.concat(storeTabbar[0]).concat(storeTabbar[2]);
                console.log("显示两个"+JSON.stringify(this.tabbar))}})}

各页面引用tabbar时则不需要传参,可以直接引用,实例:

<template><view><view>消息页面</view><view><custom-tabbar></custom-tabbar></view></view></template>

以上是实现tabbar动态显示的实现过程,如果感觉有帮助欢迎评论区点赞或留言!