uni-app动态切换底部导航tabBar,和设置tabBar相关信息

2 篇文章 0 订阅
1 篇文章 0 订阅
问题:

点击按钮时切换底部tabBar,从订单跳转到首页
在这里插入图片描述

解决:

使用uni.switchTab进行页面跳转
对应官网API链接: https://uniapp.dcloud.io/api/router?id=switchtab

在这里插入图片描述

问题回顾:

我把问题想得复杂了,第一时间没想到使用页面跳转,以为需要找到tabBar对应的API来进行激活对应的页面,因为一开始的方向就不对,导致看了一会儿官网API和百度一会儿都没能解决问题,后来无意间看到有人使用页面跳转后,第一时间看了下官网上 路由与页面跳转 这一块的API后迅速的把问题解决。

拓展:设置tabBar相关信息

uni.setTabBarItem 动态设置tabBar某一项的内容

示例代码
uni.setTabBarItem({
  index: 0, //tabBar 的哪一项,从左边算起
  text: 'text', //tab 上的按钮文字
  iconPath: '/path/to/iconPath', //图片路径
  selectedIconPath: '/path/to/selectedIconPath' //选中时的图片路径
})

uni.setTabBarStyle 动态设置 tabBar 的整体样式

示例代码
uni.setTabBarStyle({
  color: '#FF0000', //tab 上的文字默认颜色
  selectedColor: '#00FF00', //tab 上的文字选中时的颜色
  backgroundColor: '#0000FF', //tab 的背景色,HexColor
  borderStyle: 'white' //tabBar上边框的颜色, 仅支持 black/white
})

uni.setTabBarBadge 为 tabBar 某一项的右上角添加文本

示例代码
uni.setTabBarBadge({
  index: 0, //tabBar的哪一项,从左边算起 0为第一项
  text: '1' //显示的文本,不超过 3 个半角字符
})

等等等等… 具体请        👇
官网API链接:https://uniapp.dcloud.io/api/ui/tabbar

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app中,可以通过自定义底部tabbar组件来实现切换动画效果。首先,在tab-bar组件中,可以使用unitabbar组件来实现底部tab切换功能。在tab-bar组件中,可以通过设置backgroundColor属性,color属性和tintColor属性来自定义底部tabbar的背景颜色,字体颜色和选中状态的图标高亮颜色。接着,在methods中的tabClick方法中,可以使用uni的redirectTo方法来进行tab页的跳转,并将当前tab的高亮索引更新为点击的tab的索引。这样,当点击底部tab时,页面会实现切换动画效果并跳转到对应的tab页。同时,可以根据自己的需求添加一些额外的功能,如实现tab的数字角标和tab页面的跳转。例如,在基础上可以添加tab的数字角标和tab页面跳转功能。为了保证底部tabbar的高度一致,可以在全局的数据中设置一个tabbarHeight属性,并在tab-bar组件中引用该属性。这样,就可以实现自定义底部tabbar切换动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [H5版基于uni-app实现自定义底部tabbar效果(支持底部图标选中时的渐变效果)](https://blog.csdn.net/CherryLee_1210/article/details/106281571)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [uni-app 自定义底部导航栏的实现](https://blog.csdn.net/weixin_32786041/article/details/111911595)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值