SideBar 侧边导航与内容区域交互重写【Ant Design Mobile】

需求:SideBar 侧边导航与内容区域交互

  1. 点击侧边栏某一项时,相对应内容区域滚动到视口顶部
  2. 滚动视口区域,到某一项内容区域,侧边栏选中状态也会跟着变化
const SideBarAgain: React.FC<PopupProps> = (props) => {// 父组件传过来的值const { tabList } = propsconst mainElementRef = useRef<HTMLDivElement>(null)// 用来监听页面滚动事件const scroll = useScroll(mainElementRef);const mainElement = mainElementRef.currentconst state = useReactive({ activeKey: '1' });const handleScroll = (key?:string) => {// 滚动时,需要修改侧边栏选中状态// 过滤出元素顶部到视窗的距离大于0的元素const currentKey = tabList.filter((item: { key: string })=>{const element = document.getElementById(`anchor-${item.key}`)if (!element) returnconst rect = element.getBoundingClientRect()if (rect.top >= 0) {return item}})// 判断如果currentKey大于0,则选取第一个key值if(currentKey.length){state.activeKey = currentKey[0].key}else{state.activeKey = tabList[tabList.length-1].key}// 点击侧边栏传入的ID,并滚动到对应位置if(key){document.getElementById(`anchor-${key}`)?.scrollIntoView({behavior: "smooth"})state.activeKey = key}}useEffect(() => {if (!mainElement) returnmainElement.addEventListener('scroll', () => handleScroll)return () => {mainElement.removeEventListener('scroll', () => handleScroll)}}, [])// 利用scroll的变化监听handleScrolluseLayoutEffect(() =>  handleScroll,[scroll])return (<div className='sider'><SideBar activeKey={state.activeKey} onChange={(key)=>handleScroll(key)}>{tabList.map((item: { key: string, title: string }) => (<SideBar.Item key={item.key} title={item.title} />))}</SideBar><div className='main' ref={mainElementRef}>{tabList.map((item: { key: string; title: string; text: string}) => (<div key={item.key} id={`anchor-${item.key}`} ><h2>{item.title}</h2>{item.text}</div>))}</div></div>)
}export default SideBarAgain;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79537.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可扩展性表设计方案

文章目录 1 使用预留字段2 使用JSON字段3 使用单表继承4 构建属性表5 直接构建新表6 适当冗余 1 使用预留字段 在表设计初期&#xff0c;可以预留一些命名通用的备用字段&#xff0c;例如field1、field2、field3。当业务需要增加新字段时&#xff0c;就直接使用这些预留字段,无…

Xilinx FPGA 7系列 GTX/GTH Transceivers (1)

初识Xlilix GTX 1概述 Xilinx 7系列FPGA全系所支持的GT,GT资源是Xilinx系列FPGA的重要卖点,也是做高速接口的基础,GT的意思是Gigabyte Transceiver,G比特收发器。不管是PCIE、SATA、MAC等,都需要用到GT资源来做数据高速串化和解串处理,Xilinx不同的FPGA系列拥有不同的G…

Kafka中Consumer源码解读

Consumer源码解读 本课程的核心技术点如下&#xff1a; 1、consumer初始化 2、如何选举Consumer Leader 3、Consumer Leader是如何制定分区方案 4、Consumer如何拉取数据 5、Consumer的自动偏移量提交 Consumer初始化 从KafkaConsumer的构造方法出发&#xff0c;我们跟踪到…

前端JavaScript中异步的终极解决方案:async/await

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 1. 背景 在深入讨论 async/await 之前&#xff0c;我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是…

AD22使用笔记+积累库

一、前言 使用AD9习惯了&#xff0c;但是需求逐渐上来了就不够用了&#xff0c;好多快捷的新功能要新版本软件才能用&#xff0c;所以升级使用AD22 目录 1.添加层之后中间层无法布线 2.新增快捷方式CtrlW布线&#xff0c;不用点图标了 二、环境 AD22 三、正文 1.添加层之…

SpringBoot-RabbitMQ

RabbitMQ 是一个开源的消息中间件&#xff0c;它实现了 AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议&#xff0c;并提供了可靠的消息传递机制。 Spring Boot 中使用 RabbitMQ 实现异步消息的发送和接收。 使用 Spring Boot 提供的 AmqpTemplate 和 Rab…

Redis Part1

单体架构&#xff1a;一台Web服务器、一台数据库服务器。 1.了解NoSql 什么是Nosql&#xff1f; NoSQL&#xff0c;即Not-Only-SQL&#xff0c;意思就是我们干事情不能只用SQL&#xff0c;泛指非关系型的数据库&#xff01;NoSQL定位&#xff1a;作为关系型数据库的补充&am…

小米OPPO三星一加红魔全机型解锁BL详细教程合集-ROOT刷机必要操作

解锁BL一个熟悉又陌生的词汇&#xff0c;只要你刷机root过&#xff0c;你肯定都解锁BL成功过。我们简单的描述下BL是什么&#xff1f;BL全名bootloader&#xff0c;目前市面上全部机型&#xff0c;基本出厂全部BL处于锁定的状态锁定的BL机型&#xff0c;不支持刷入非官方固件或…

性能测试 —— Jmeter事务控制器

事务&#xff1a; 性能测试中&#xff0c;事务指的是从端到端&#xff0c;一个完整的操作过程&#xff0c;比如一次登录、一次 筛选条件查询&#xff0c;一次支付等&#xff1b;技术上讲&#xff1a;事务就是由1个或多个请求组成的 事务控制器 事务控制器类似简单控制器&…

广州口腔医院种植牙-广东省爱牙工程公益种牙,获湾区群众点赞

广州种植牙价格表-自2017年成立以来,广东省爱牙工程一直坚持以公益惠民为宗旨、公益种牙为服务方向,针对群众普遍存在的口腔健康问题,开展形式多样的公益性口腔医疗惠民活动。 广州种植牙费用表-日前,广东省爱牙工程“种植牙惠民行动”第二十季已正式启动。据广东省爱牙工程官方…

韩信点兵:求韩信一共有多少兵

任务描述 本关任务&#xff1a;求韩信一共有多少兵。 韩信有一队兵&#xff0c;他想知道有多少人&#xff0c;便让士兵排队报数。 按从 1 至5报数&#xff0c;最末一个士兵报的数为 1&#xff1b; 按从 1 至 6 报数&#xff0c;最末一个士兵报的数为 5&#xff1b; 按从 1 …

栈与队列--删除字符串中的所有相邻重复项

给出由小写字母组成的字符串 S&#xff0c;重复项删除操作会选择两个相邻且相同的字母&#xff0c;并删除它们。 在 S 上反复执行重复项删除操作&#xff0c;直到无法继续删除。 在完成所有重复项删除操作后返回最终的字符串。答案保证唯一。 示例&#xff1a; 输入&#x…

C/C++指针函数与函数指针

一、指针函数 指针函数&#xff1a;本质为一个函数&#xff0c;返回值为指针指针函数&#xff1a;如果一个函数的返回值是指针类型&#xff0c;则称为指针函数用指针作为函数的返回值的好处&#xff1a;可以从被调函数向主函数返回大量的数据&#xff0c;常用于返回结构体指针。…

基于ntchat的微信群聊同步机器人

微信群有500人上限的限制&#xff0c;建立多个群的话又有信息无法互通的不便&#xff0c;此机器人通过自动将消息转发到同一个同步组内的所有群&#xff0c;消除这一不便性&#xff0c;间接达成扩大群成员数的目的。 效果演示&#xff1a; 项目地址&#xff1a; https://gith…

为何红黑树在B/B+树之上仍然占据重要地位?

为何红黑树在B/B树之上仍然占据重要地位&#xff1f; 引言二、红黑树和B/B树的基本原理2.1、红黑树的特点和性质2.2、B/B树的特点和性质2.3、红黑树和B/B树的比较 三、B/B树相对于红黑树的优势四、红黑树仍然占据重要地位的原因总结 博主简介 &#x1f4a1;一个热爱分享高性能服…

Vue echarts 饼图 引导线加小圆点,文字分行展示

需求 重点代码 完整代码 initChart() {// 创建 echarts 实例。var myChartOne this.$echarts.init(this.$refs.Echart);myChartOne.setOption({tooltip: {trigger: "item",},title: {top: center,text: [{name| this.chartTitle.name },{value| this.chartTitle.…

ROS学习笔记(四)---使用 VScode 启动launch文件运行多个节点

ROS学习笔记文章目录 01. ROS学习笔记(一)—Linux安装VScode 02. ROS学习笔记(二)—使用 VScode 开发 ROS 的Python程序&#xff08;简例&#xff09; 03. ROS学习笔记(三)—好用的终端Terminator 一、什么是launch文件 虽然说Terminator终端是能够比较方便直观的看运行的节点…

l8-d15 IO多路复用select函数

一、IO多路复用select函数 1.select函数 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout); nfds: 是三个集合中编号最高的文件描述符&#xff0c;加上 1 readfds/writefds/exceptfds: 可读集合/可写集…

LLM 05-大模型法律

LLM 05-大模型法律 5.1 简介 在这个教程中&#xff0c;我们将探讨法律对大型语言模型的开发和部署有何规定。我们将会按照以下的步骤进行讨论&#xff1a; 新技术与现有法律的关系 与我们之前的讲座一样&#xff0c;比如关于社会偏见的讲座&#xff0c;我们将要讨论的很多内容…