当前位置: 首页 > news >正文

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

 

 

http://www.lryc.cn/news/145756.html

相关文章:

  • Vue.js中,router和route
  • 【微服务】07-缓存
  • 权限校验中的“双token”方案
  • TensorFlow的基本概念
  • 【卷积神经网络】MNIST 手写体识别
  • Ansible学习笔记2
  • 80. 删除有序数组中的重复项 II
  • CVE-2023-36874 Windows错误报告服务本地权限提升漏洞分析
  • IDEA遇到 git pull 冲突的几种解决方法
  • [Unity]UI和美术出图效果不一致
  • SpringBoot整合JPA和Hibernate框架
  • Java中文件的创建(三种方式),文件常用的方法
  • Spring boot中调用C/C++(dll)
  • 【Apollo学习笔记】——规划模块TASK之PATH_DECIDER
  • Lua学习(二)
  • 制作鲜花商城小程序的详细步骤
  • Ubuntu20以上高版本如何安装低版本GCC
  • context.WithCancel()的使用
  • vue3中引入百度地图
  • 【Linux-Day8- 进程替换和信号】
  • 日志文件之间关系和介绍及应用
  • mac电脑屏幕录制Berrycast Mac屏幕录制软件
  • 机器学习笔记之最优化理论与方法(一)最优化问题概述
  • 【ES5新特性一】 严格模式语法变化、全局的JSON对象、编码和解码的方法
  • Java【手撕滑动窗口】LeetCode 3. “无重复字符的最长子串“, 图文详解思路分析 + 代码
  • 学习哈哈哈哈
  • 05-基础例程5
  • 双基证券:预计未来还会有更多政策来吸引增量资金
  • 前端:html实现页面切换、顶部标签栏,类似于浏览器的顶部标签栏(完整版)
  • 强化自主可控,润开鸿发布基于RISC-V架构的开源鸿蒙终端新品