万能前端框架uni app初探03:底部导航开发

前言

本节我们使用uni app的底部导航功能，点击不同tab会显示不同页面，这个功能在实际项目开发中几乎是必备的。

一、基础知识

1.tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

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

常用参数如下所示，更多内容见官网tabBar说明：https://uniapp.dcloud.io/collocation/pages?id=tabbar

属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色， 可选值 black/whiteApp 2.3.4+ 支持 其他颜色值listArray是tab 的列表，详见 list 属性说明， 最少2个、最多5个 tab

"tabBar": {
 "color": "#7A7E83",
 "selectedColor": "#3cc51f",
 "borderStyle": "black",
 "backgroundColor": "#ffffff",
 "list": [{
 "pagePath": "pages/component/index",
 "iconPath": "static/image/icon_component.png",
 "selectedIconPath": "static/image/icon_component_HL.png",
 "text": "组件"
    }, {
 "pagePath": "pages/API/index",
 "iconPath": "static/image/icon_API.png",
 "selectedIconPath": "static/image/icon_API_HL.png",
 "text": "接口"
    }]
}

二、示例

将上一讲app02工程复制为app003,然后拖到HBuilder X中。

1.新建导航页面

右击pages

点击新建页面，选择默认模板

添加推荐页面、我的页面，完成后，页面如下

其中，navigationBarTitleText设置了主页标题。

2.配置底部导航

准备Tabar图标如下：

在pages.json文件中，增加Tabar配置如下：

"tabBar":{
 "color":"#AAAAAA",
 "selectedColor":"#007AFF",
 "backgroundColor":"#FFFFFF",
 "borderStyle":"black",
 "list":[
        {
 "pagePath":"pages/index/index",
 "text":"首页",
 "iconPath":"static/home.png",
 "selectedIconPath":"static/home_selected.png"
        },
        {
 "pagePath":"pages/recommand/recommand",
 "text":"推荐",
 "iconPath":"static/recommand.png",
 "selectedIconPath":"static/recommand_selected.png"
        },
        {
 "pagePath":"pages/my/my",
 "text":"我的",
 "iconPath":"static/my.png",
 "selectedIconPath":"static/my_selected.png"
        }
    ]
}

三、运行

点击运行--->运行到浏览器--->Chome

web端显示如下：

点击按钮，切换为我的页面

Android具体运行过程不在描述，如有疑问，请看第一节，安装后界面如下：

寄语：无限风光在险峰！