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

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

前言

在我们使用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内容就实现了