uniapp-封装底部导航栏tabbar(第二种方案)

最新推荐文章于 2024-04-17 21:03:58 发布

VIP文章范闲~

最新推荐文章于 2024-04-17 21:03:58 发布

阅读量582

点赞数

分类专栏： uniapp 文章标签：大数据

本文链接：https://blog.csdn.net/m0_60708088/article/details/125663691

版权

1、在page页面配置tabbar 只配置路径就行

"tabBar": {
		"color": "#747174",
		"selectedColor": "#6cc2c1",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
        "list":[
            {"pagePath": "pages/index/index"},
            {"pagePath": "pages/news/index"},
            {"pagePath": "pages/map/index"},
            {"pagePath": "pages/activity/index"},
            {"pagePath": "pages/my/index"},
        ]
}

2、创建tabbar组件，并且添加 uni.hideTabBar() 将系统初始的tabbar隐藏

首先创建tabbarList存放我们tabbar的配置参数

 tabbarList: [
    {
      pagePath: '/pages/index/index',
      text: '主页',
      iconPath: '../static/tabbar/home.png',
      selectedIconPath: '../static/tabbar/homeSelected.png',
    },
    {
      pagePath: '/pages/news/index',
      text