uniapp学习笔记---tabbar

什么是tabbar？

TabBar 是一种用户界面元素，通常用于移动应用程序中的底部导航栏。它通常显示在应用的底部，提供快速导航到应用的不同页面或功能。

TabBar 一般由多个标签组成，每个标签代表一个页面或功能。用户可以通过点击标签来切换页面或执行相关操作。

在移动应用中，TabBar 通常具有以下特点：

- 固定在屏幕底部：TabBar 通常被设计为固定在应用的底部，以提供便捷的访问。
- 多个标签：TabBar 可以包含多个标签，每个标签代表一个页面或功能。
- 切换页面：用户可以通过点击不同的标签来切换到相应的页面或功能。
- 视觉反馈：当用户点击标签时，TabBar 通常会提供一些视觉反馈，例如改变标签的颜色、添加选中状态等，以提示用户当前选择的页面。

在开发移动应用时，你可以使用相应的移动应用开发框架或库来创建和配置 TabBar。这样可以使得开发过程更加简便，并且能够根据需要自定义 TabBar 的样式和功能。

在uniapp中怎么使用tabbar跳转呢？

1.在index.vue文件中methods:{}中添加事务

one(){
				uni.switchTab({
					url:'/pages/index/me',
				})
			},

2.在pages.json中像下面代码进行修改

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "安全卫士"
			}
		},
		{
			"path" : "pages/index/me",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	  "tabBar": {
	    "list": [{
	      "pagePath": "pages/index/index",
	      "text": "首页"
	    },{
	      "pagePath": "pages/index/me",
	      "text": "其他"
	    }]
	  },
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#ADD8E6",
		"backgroundColor": "#ADD8E6"
	},
	"uniIdRouter": {}
}

3.其中的

{
			"path" : "pages/index/me",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}

和

"tabBar": {
	    "list": [{
	      "pagePath": "pages/index/index",
	      "text": "首页"
	    },{
	      "pagePath": "pages/index/me",
	      "text": "其他"
	    }]
	  },

是必须添加的，记住位置不要填写错误。