问题:

点击按钮时切换底部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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐