react/vue跳转到文章指定位置简单demo

news/2024/9/25 10:39:49/

antd 好像有差不多功能的插件 , 但要求使用arco , arco上面的例子就很,,,   或者说根本就没有  不如自己写  ,高度自定义 更加方便 , 有时候看别人的文档真的挺折磨的 

vue跟react都差不多 , 主要触发 和 跳转  ,触发写的是函数触发 一眼看懂 , 跳转也是简单函数 ,上代码
import { Tabs, Typography } from "@arco-design/web-react"const LiveTextFlow = ({ flowArr }) => {// 定义跳转到的位置const jumpToAnchor = (anchorId) => {const anchorElement = document.getElementById(anchorId);if (anchorElement) {anchorElement.scrollIntoView({ behavior: 'smooth' });}};const tabsChange = (tabs) => {console.log("tabs", tabs)if (tabs == 3) {jumpToAnchor('section2')} else {jumpToAnchor('section1')}}return (<div className="scroll-y h-[70%]"><Tabs defaultActiveTab='1' onChange={(key) => tabsChange(key)}><Tabs.TabPane key='1' title='Tab 1'></Tabs.TabPane><Tabs.TabPane key='2' title='Tab 2' disabled></Tabs.TabPane><Tabs.TabPane key='3' title='Tab 3'></Tabs.TabPane></Tabs><div className="h-full" style={{ overflowY: 'auto' ,border:'1px solid red' }}><div id="section1" className=""><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph></div><div id="section2"><Typography.Paragraph>@@@@@@@@@@@@@</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph><Typography.Paragraph>This is the content</Typography.Paragraph></div></div></div>)
}export default LiveTextFlow;


http://www.ppmy.cn/news/1442073.html

相关文章

设计模式-状态模式在Java中的使用示例-信用卡业务系统

场景 在软件系统中&#xff0c;有些对象也像水一样具有多种状态&#xff0c;这些状态在某些情况下能够相互转换&#xff0c;而且对象在不同的状态下也将具有不同的行为。 为了更好地对这些具有多种状态的对象进行设计&#xff0c;我们可以使用一种被称之为状态模式的设计模式…

IDEA那些牛X的插件

activate-power-mode&#xff1a;代码震动效果 Easy JavaDoc&#xff1a;帮你写注释 EASY Code&#xff1a;帮你生成mapper之类的代码 Generate O2O&#xff1a;帮你生成两个类之间复制的代码 GitToolBox&#xff1a;Git工具 IDE Eval Reset&#xff1a;懂得都懂 Java Be…

C++、Java、Python如何工作?

该图显示了编译和执行是如何工作的。 编译语言由编译器编译成机器代码。机器代码稍后可由CPU直接执行。示例&#xff1a;C、C、Go 像Java这样的字节码语言首先将源代码编译成字节码&#xff0c;然后JVM执行程序。有时JIT&#xff08;即时&#xff09;编译器将源代码编译成机器代…

Maven项目创建springboot项目mybatis-plus

Maven项目创建 创建maven项目java版本环境实体类接口层控制层启动类pom.xml文件依赖application.properties文件配置创建maven项目 java版本环境 版本: 1. java version "1.8.0_251" 2. Apache Maven 3.8.4 实体类 create table tf_users ( user_id int PRIMA…

虚拟机VMware安装与Ubuntu

1.虚拟机安装 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;2fr6 CG54H-D8D0H-H8DHY-C6X7X-N2KG6 2.Ubuntu下载 Download Ubuntu Desktop | Ubuntu 3.设置 如后续要下一些软件越大越好

linux驱动-CCF-4 常见困惑

问题&#xff1a;设备树配置频率的问题 ”fixed-clock“ 节点 包含clock-frequency 属性,用于配置 时钟controller 的频率 注意区分assigned-clock-rate static struct clk *_of_fixed_clk_setup(struct device_node *node) { struct clk *clk; const char *clk_name …

数据结构_时间复杂度

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 什么是时间复杂度&#xff1f; 时间复杂度的定义&#xff1a;在计算机科学中&#xff0c;算法的时间复杂度是一个函数&#xff0c;它定量描述了该算法的运行时间。一个算法执行所耗费的时间&#xff0…

java高级工程师面试题及答案解析干货汇总-MYSQL与SQLServer区别及其适用场景

SQLServer与MySQL区别及适用场景 1. SQLServer与MySQL的区别&#xff08;1&#xff09;许可与成本&#xff08;2&#xff09;性能与可扩展性&#xff08;3&#xff09;功能与特性&#xff08;4&#xff09;社区与支持 2. 优劣势分析SQLServer的优势MySQL的优势SQLServer的劣势M…