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

 

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