TabBar组件如何跳转页面?

简介: TabBar组件如何跳转页面?

1、先引入

2、假数据

const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'todo',
      title: '待办',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'message',
      title: '消息',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: 'personalCenter',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  const [activeKey, setActiveKey] = useState('todo')

3、获取假数据的key进行渲染输出

<TabBar>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>

4、给大的tabBar加一个点击事件

5、根据key值进行判断和跳转

注意:自己的页面路径要跟tabs里面的路径一样,要先分清tabs里面的数据是哪一个页面,然后根据自己的页面将tabs里面的key进行更改

 

相关文章
|
8月前
|
移动开发 JavaScript 小程序
uView Tabbar 底部导航栏
uView Tabbar 底部导航栏
199 0
|
8月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
205 0
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
93 0
|
5月前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
6月前
uniapp 底部导航栏 tabBar
uniapp 底部导航栏 tabBar
68 0
|
8月前
|
缓存 JavaScript 小程序
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
586 1
|
8月前
uniapp自定义tabbar
uniapp自定义tabbar
72 0
|
JavaScript 前端开发
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
115 0
|
小程序 前端开发 JavaScript
微信小程序底部按钮tabbar组件封装
微信小程序底部按钮tabbar组件封装
100 0
17EasyUI 布局- 动态添加标签页(Tabs)
17EasyUI 布局- 动态添加标签页(Tabs)
58 0