Uniapp怎么动态更改tabbar-猿码集

Uniapp怎么动态更改tabbar

Uniapp是基于Vue.js开发的跨端开发框架，可以一次性开发出H5、小程序、App等多种平台的应用。其中，tabbar是小程序和App常用的导航栏，可以在页面底部展示不同页面的入口。本篇文章主要介绍如何动态更改tabbar。

1. 小程序原生tabbar

小程序原生的tabbar是由开发者在app.json文件中配置，如下所示：

"tabBar": { "color": "#999999", "selectedColor": "#167aff", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/img/tabbar/home.png", "selectedIconPath": "static/img/tabbar/home_active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "static/img/tabbar/cart.png", "selectedIconPath": "static/img/tabbar/cart_active.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath": "static/img/tabbar/user.png", "selectedIconPath": "static/img/tabbar/user_active.png" } ] }

其中，list数组中的每一项代表一个页面，可以配置页面路径、显示文本、图标等信息。如果需要动态更改tabbar，则需要修改app.json文件并调用wx.setTabBarItem()方法。

// 在某个页面中动态更改tabbar的第一个图标和文本 wx.setTabBarItem({ index: 0, text: '首页', iconPath: '/static/img/tabbar/home2.png', selectedIconPath: '/static/img/tabbar/home_active.png' })

上述代码将tabbar中第一个图标的路径和文本分别修改为新的路径和文本，需要注意的是，如果tabbar的配置发生了改变，需要重新启动小程序。

2. uni-ui提供的tabbar

在uni-app中，可以使用uni-ui提供的底部导航栏组件TabBar，它可以动态渲染tabbar的图标和文本，并支持在某些页面隐藏tabbar。在使用TabBar组件时，需要在引入组件的页面中配置pages和tabBar，如下所示：


<template>
  <div>
    <!-- TabBar组件 -->
    <tab-bar active="{{active}}" color="#999" activeColor="#333">
      <tab-bar-item icon="home" text="首页" url="/pages/index/index"></tab-bar-item>
      <tab-bar-item icon="search" text="搜索" url="/pages/search/search"></tab-bar-item>
      <tab-bar-item icon="mine" text="我的" url="/pages/mine/mine"></tab-bar-item>
    </tab-bar>
    <!-- 页面内容 -->
    <view class="content">
      页面内容
    </view>
  </div>
</template>
<script>
// 引入TabBar组件
import tabBar from '@/components/tab-bar/tab-bar.vue'
export default {
    components: { tabBar },
    data() {
        return {
            active: 0
        }
    },
    onShow() {
        // 显示tabbar
        uni.showTabBar()
    },
    onHide() {
        // 隐藏tabbar
        uni.hideTabBar()
    },
    onUnload() {
        // 隐藏tabbar
        uni.hideTabBar()
    }
}
</script>
<style lang="scss">
// 样式
</style>

上述代码中，TabBar组件通过uni-ui的方式引入，可以在组件内部定义每个页面对应的图标和文本，并通过active属性控制当前选中的页面。此外，如果需要在某个页面隐藏tabbar，可以通过调用uni.hideTabBar()方法实现，在某个页面显示tabbar时，则可以通过调用uni.showTabBar()方法实现。

总结

通过以上两种方式，可以实现动态更改小程序和uni-app的tabbar。在使用小程序原生的tabbar时，需要修改app.json文件并调用wx.setTabBarItem()方法。在使用uni-ui的TabBar组件时，可以动态渲染tabbar的图标和文本，并通过调用uni.hideTabBar()和uni.showTabBar()方法实现tabbar的隐藏和显示。

Uniapp怎么动态更改tabbar