uni-app项目配置手机端底部的tab栏（一）

刺骨的言语ヽ痛彻心扉 2023-05-29 13:22 3阅读 0赞

一般我们在开发手机应用的时候都会有手机底部的tab导航栏，然而我们在使用uni-app开发的时候，我们可以直接在项目中配置tab即可，非常的方便。

## 1、创建项目 ##

我们用uni-app官方提供的HBuilder X工具来创建项目，可在官网上[下载HBuilder X工具][HBuilder X]，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70][]

下载好之后， 不需要安装，直接运行即可。我们找到文件进行创建项目：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 1][]

创建完项目，我们可以在谷歌浏览器中运行：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 2][]

这里面提供了好几个平台运行，都可以运行的。

## 2、配置tab栏 ##

###    以下是官网给出的规定： ###

*  当设置 position 为 top 时，将不会显示 icon
 *  tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
 *  tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
 *  tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
 *  顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 3][]

在项目中有一个pages.json文件，打开这个文件，在里面配置tabbar

"tabBar": {
    		"color": "#bfbfbf",
    		"selectedColor": "#515151",
    		"borderStyle":"black",
    		"backgroundColor":"#ffffff",
    		"list": [
    			{
    				"pagePath":"pages/index/index", //页面路径
    				"text":"首页",                   //tab字体显示
    				"iconPath":"static/tabBarIco/index.png", //未选中tab图标路径
    				"selectedIconPath":"static/tabBarIco/index_sel.png"  //选中tab图标路径
    			},
    			{
    				"pagePath":"pages/search/search",
    				"text":"搜索",
    				"iconPath":"static/tabBarIco/search.png",
    				"selectedIconPath":"static/tabBarIco/search_sel.png"
    			},
    			{
    				"pagePath":"pages/me/me",
    				"text":"我的",
    				"iconPath":"static/tabBarIco/me.png",
    				"selectedIconPath":"static/tabBarIco/me_sel.png"
    			}
    		]
    	}

以上就是配置uni-app项目的手机端tab栏。

### 想要获取更多的学习资料和学习交流，请关注微信公众号：**码上言，谢谢大家的支持！** ###

![20191106200531357.jpg][]

[HBuilder X]: https://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106161157145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191106162052488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191106162330429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191106162821991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc5NjAw,size_16,color_FFFFFF,t_70
[20191106200531357.jpg]: https://img-blog.csdnimg.cn/20191106200531357.jpg