移动端开发基础【21】tabBar 配置

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

  • Tips

(1)   当设置 position 为 top 时,将不会显示 icon

(2)   tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

(3)   tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)

(4)   tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。

(5)   顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。

  • 属性说明

属性

类型

必填

默认值

描述

平台差异说明

color

HexColor

 

tab 上的文字默认颜色

 

selectedColor

HexColor

 

tab 上的文字选中时的颜色

 

backgroundColor

HexColor

 

tab 的背景色

 

borderStyle

String

black

tabbar 上边框的颜色,可选值 black/white

App 2.3.4+ 支持其他颜色值

blurEffect

String

none

iOS 高斯模糊效果,可选值 dark/extralight/light/none

App 2.4.0+ 支持

list

Array

 

tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

 

position

String

bottom

可选值 bottom、top

top 值仅微信小程序支持

fontSize

String

10px

文字默认大小

App 2.3.4+

iconWidth

String

24px

图标默认宽度(高度等比例缩放)

App 2.3.4+

spacing

String

3px

图标和文字的间距

App 2.3.4+

height

String

50px

tabBar 默认高度

App 2.3.4+

midButton

Object

 

中间按钮 仅在 list 项为偶数时有效

App 2.3.4+

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性

类型

必填

说明

pagePath

String

页面路径,必须在 pages 中先定义

text

String

tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标

iconPath

String

图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标

selectedIconPath

String

选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

  • midButton 属性说明

属性

类型

必填

默认值

描述

width

String

80px

中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度

height

String

50px

中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果

text

String

 

中间按钮的文字

iconPath

String

 

中间按钮的图片路径

iconWidth

String

24px

图片宽度(高度等比例缩放)

backgroundImage

String

 

中间按钮的背景图片路径

midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap。

  • tabbar常见问题

(1)tabbar 的默认高度,在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px,与H5端统一。开发人员也可以自行设定高度,调回56px。

(2)tabbar 的 js api,可有实现动态显示隐藏(如弹出层无法覆盖tabbar)、内容修改(如国际化)、item加角标等的功能。hello uni-app模板中也有具体的示例,可以参考。

(3)tabbar 的 item 点击事件见页面生命周期的onTabItemTap。

(4)代码跳转到tabbar页面,api只能使用uni.switchTab,不能使用uni.navigateTo、uni.redirectTo;使用navigator组件跳转时必须设置open-type="switchTab"

(5)tabbar 在H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量--window-bottom,比如悬浮在tabbar上方10px的按钮,样式如下bottom: calc(var(--window-bottom) + 10px)

(6)中间带+号的tabbar模板例子,可以参考uniapp插件市场的示例(底部带加号tabbar选项卡项目模板)。可跨端,但+号不凸起。如需中间凸起,配置tabbar的midButton。

(7)原生的tabbar有且只有一个且在首页。二级页如需的tab,前端自行实现。

(8)若App端自定义tabbar,建议使用nvue并做成单页方式,即所有tabbar的页面内容其实写在一个nvue页面里,这样的性能体验更好。

(9)微信通过webview自定义tabbar,在uni-app也支持,但仅支持微信。因该功能体验不佳,app上没有实现这个方式,而是推荐使用app提供的自定义tabbar方式,不管是原生tabbar额外的自定义配置还是nvue的单页自定义tabbar。

(10)  如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板

(11)  前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩,可以参考插件市场提供的示例:底部原生图标分享菜单

(12)  微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。

  • 代码示例

"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": "接口"

    }]

}

 

上一篇:三个创建WebStorm项目的方法


下一篇:小程序的四种跳转方式和怎么传值的