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进行更改

 

相关文章
|
4月前
|
移动开发 JavaScript 小程序
uView Tabbar 底部导航栏
uView Tabbar 底部导航栏
136 0
|
4月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
143 0
|
10月前
|
小程序 JavaScript
微信小程序自定义底部tabBar按钮
微信小程序自定义底部tabBar按钮
159 0
|
1月前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
2月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
69 4
|
2月前
uniapp 底部导航栏 tabBar
uniapp 底部导航栏 tabBar
43 0
|
小程序
微信小程序wx.navigateTo从子页面跳回父页面,页面如何刷新
要理解微信小程序的页面刷新问题,首先需要理解页面的生命周期,所以以下两个页面必须多看几遍页面生命周期页面路由 关于页面生命周期,重点在于理解onLoad,onShow. 从以上的第一个链接文档可以看到,页面create后,依次执行onLoad,onShow,onReady,但onLoad和onR.
3530 0
|
9月前
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
110 0
|
4月前
|
缓存 JavaScript 小程序
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
378 0
|
4月前
uniapp点击tabbar之前做判断
uniapp点击tabbar之前做判断
248 1