一般我们在开发手机应用的时候都会有手机底部的tab导航栏,然而我们在使用uni-app开发的时候,我们可以直接在项目中配置tab即可,非常的方便。
1、创建项目
我们用uni-app官方提供的HBuilder X工具来创建项目,可在官网上下载HBuilder X工具,
下载好之后, 不需要安装,直接运行即可。我们找到文件进行创建项目:
创建完项目,我们可以在谷歌浏览器中运行:
这里面提供了好几个平台运行,都可以运行的。
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->模板->顶部选项卡。
在项目中有一个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栏。
想要获取更多的学习资料和学习交流,请关注微信公众号:码上言,谢谢大家的支持!