uni-app菜单tabbar(十四)

20 篇文章 0 订阅 ¥19.90 ¥99.00

tabbar

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

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生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->模板->顶部选项卡。

属性说明:

属性 类型 必填 默认值 描述 平台差异说明
color HexColor tab 上的文字默认颜色</
  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni_app中的选项卡可以通过使用uni-app官方提供的组件 `uni-tab-bar` 来实现。该组件可以在底部或顶部显示多个选项卡,用户可以通过点击不同的选项卡来切换不同的页面。 使用 `uni-tab-bar` 组件可以通过以下步骤实现: 1. 在页面的 `template` 中添加 `uni-tab-bar` 组件,并设置 `tabList` 属性,指定选项卡的列表。 2. 在每个选项卡对应的页面中,添加 `tabBar` 属性,指定该页面对应的选项卡的索引值。 3. 在 `App.vue` 中设置 `tabBar` 属性,指定默认选中的选项卡的索引值,以及点击选项卡后的处理函数。 例如,以下示例代码实现了一个包含两个选项卡的底部选项卡菜单: ```html <template> <view> <view> <text>这是第{{activeIndex+1}}个页面</text> </view> <uni-tab-bar :tabList="tabList" @click="onTabBarClick" :active="activeIndex"> </uni-tab-bar> </view> </template> <script> export default { data() { return { activeIndex: 0, tabList: [ { pagePath: "/pages/tab1/tab1", text: "选项卡1", iconPath: "/static/tab1.png", selectedIconPath: "/static/tab1_selected.png" }, { pagePath: "/pages/tab2/tab2", text: "选项卡2", iconPath: "/static/tab2.png", selectedIconPath: "/static/tab2_selected.png" } ] }; }, methods: { onTabBarClick(e) { this.activeIndex = e.index; } } }; </script> ``` 在每个选项卡对应的页面中,需要设置 `tabBar` 属性,例如: ```html <script> export default { tabBar: { index: 0 } }; </script> ``` 其中,`index` 表示该页面对应的选项卡的索引值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A_nanda

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值