uniapp 底部导航栏 tabBar

在 static 文件夹中新建文件夹 tabBar,放入标签图片

在这里插入图片描述
源素材如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在 pages.json 中添加

	// 底部导航
	"tabBar": {
   
		// tab默认文字颜色
		"color": "#bfbfbf",
		// tab选中后的文字颜色
		"selectedColor": "#153c65",
		// 底栏列表
		"list": [{
   
				// tab默认图标路径
				"iconPath": "static/tabBar/tabBar_index_default.png",
				// tab选中后的图标路径
				"selectedIconPath": "static/tabBar/tabBar_index_selected.png",
				// tab跳转的页面路径
				"pagePath": "pages/index/index",
				// tab文字
				"text": "首页"
			},
			{
   
				"iconPath": "static/tabBar/tabBar_me_default.png",
				"selectedIconPath": "static/tabBar/tabBar_me_selected.png",
				"pagePath": "pages/me/me",
				"text": "我的"
			}
		]
	},

预览效果如下

在这里插入图片描述

相关推荐

  1. uView Tabbar 底部导航

    2023-12-28 19:38:02       69 阅读
  2. Android 底部导航实现

    2023-12-28 19:38:02       21 阅读
  3. Uniapp自定义导航

    2023-12-28 19:38:02       57 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-28 19:38:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-28 19:38:02       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-28 19:38:02       82 阅读
  4. Python语言-面向对象

    2023-12-28 19:38:02       91 阅读

热门阅读

  1. Mybatis 动态 SQL - script,bind,多数据库支持

    2023-12-28 19:38:02       57 阅读
  2. [spark] dataframe的cache方法

    2023-12-28 19:38:02       71 阅读
  3. 初级游戏客户端社招面试问题总结

    2023-12-28 19:38:02       52 阅读
  4. 【2023-12-23周报】

    2023-12-28 19:38:02       55 阅读
  5. svg学习

    svg学习

    2023-12-28 19:38:02      49 阅读
  6. 从字符串中移除星号

    2023-12-28 19:38:02       60 阅读