uniapp 配置基本的 tabbar 和动态修改内容

2023-04-22
广东
本文字数：1334 字
阅读完需：约 4 分钟

前言

在我们使用 uniapp 开发项目的时候，如果是一个多 tab 的应用那么就可以使用到 tabBar 配置项来指定底部导航栏，以及 tab 切换时显示的对应页，uniapp 在 pages.json 中为我们提供了 tabBar 配置，方便我们快速开发

tabbar 的设置也是有一些规定的：

设置 tabbar 的位置为 top 时，图标是不会显示的
tabbar 的是一个数组，最少配置 2 个，最多配置 5 个
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的 onShow，不会再触发 onLoad
顶部的 tabbar 目前仅微信小程序上支持

配置 tabbar

配置 tabbar 我们需要创建几个页面和准备几张 tabbar 的图片(点击和未点击的)

然后在 pages.json 里配置 tabbar，直接输入 tabbar 就会有代码提示了

在官方的说明文档中规定了一些必填项，如 list，color，selectedColor，backgroundColor 和一些选填项，在 list 里也规定了一些必填的选项，pagePath 页面路径和 text 按钮文字，我们按照自己的需要设置就行了

"tabBar": {    "color": "#333333",    "selectedColor": "#ff0000",    "backgroundColor": "#ffffff",    "list": [            {                    "pagePath": "pages/index/index",//页面路径                    "text": "首页", //按钮文字                    "iconPath": "static/tabbar/index.png", //图片路径                    "selectedIconPath": "static/tabbar/index1.png" //选中的图片路径            },            {                    "pagePath": "pages/order/order",                    "text": "订单",                    "iconPath": "static/tabbar/order.png",                    "selectedIconPath": "static/tabbar/order1.png"            },            {                    "pagePath": "pages/shop/shop",                    "text": "商城",                    "iconPath": "static/tabbar/shop.png",                    "selectedIconPath": "static/tabbar/shop1.png"            },            {                    "pagePath": "pages/my/my",                    "text": "我的",                    "iconPath": "static/tabbar/my.png",                    "selectedIconPath": "static/tabbar/my1.png"            }    ]},

复制代码

可以看到 tabbar 成功创建出来了

动态修改内容

当我们需要动态修改 tabbar 的内容，如点击了商城 tabbar 的内容分别变成了客服，购物车，商城，商品订单该怎么办呢？官方文档给了我们解决办法，使用 uni.setTabBarItem 动态设置 tabBar 某一项的内容

如何使用 uni.setTabBarItem 完成上面所说的修改呢？新建将要修改成的页面，这里图片我就不引入了，使用原来的图片

然后新建一个数组，存放要 tabbar 要修改的数据，当每次进入商城页面的时候就触发 onShow 页面函数按照数组的每一项循环修改 tabbar

然后就看到 tabbar 的内容被成功修改了

然后可以在商城页面设置一个按钮，将原来设置 tabbar 的数据复制过来，点击按钮还原原来的 tabba

goBack(){    for(let i = 0;i<this.list1.length;i++){            uni.setTabBarItem(this.list[i])    }    uni.switchTab({            url:'/pages/index/index'    })}

复制代码

动态修改 tabbar 内容就实现了