antdv 锚点踩坑

news2024/11/20 8:35:52

目录

1.锚点无滚动效果

2. 进入页面跳转到指定锚点


1.锚点无滚动效果

背景:使用antd的锚点时,按照官方文档的用法配置之后发现锚点组件的锚点Title位置没办法随着我的页面滚动而变化,但是点击Title跳转具体锚定位置的功能却是没有问题的

解决方法:getContainer绑定滚动范围容器

<a-anchor class="anchor" :get-container="getContainerBox" > 
    <a-anchor-link v-for="(item,i) in anchorList" :key="i" :href="'#'+item.href">
         <template slot="title">
             {{item.title}}<span></span>
         </template>
    </a-anchor-link>
</a-anchor>
getContainerBox() {
    return this.$refs.containerBox;
},

2. 进入页面跳转到指定锚点

location.hash = 'mapV'

上面效果可用下方代码同样实现

document.getElementById("mapV").scrollIntoView(); 

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

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

相关文章

使用 Elasticsearch 作为向量数据库:深入研究 dense_vector 和 script_score

Elasticsearch 是一个非常强大且灵活的搜索和分析引擎。 虽然其主要用例围绕全文搜索&#xff0c;但它的用途广泛&#xff0c;足以用于各种其他功能。 其中一项引起许多开发人员和数据科学家关注的功能是使用 Elasticsearch 作为向量数据库。 随着 dense_vector 数据类型的出现…

排名评估指标综合指南

一、介绍 右排序是机器学习中的一个问题&#xff0c;其目标是以最合适的方式对最终用户的文档列表进行排序&#xff0c;因此最相关的文档出现在顶部。排名出现在数据科学的多个领域中&#xff0c;从推荐系统开始&#xff0c;算法建议一组要购买的商品&#xff0c;最后到 NLP 搜…

STM32F4X TFTLCD ST7735S使用

STM32F4X TFTLCD ST7735S使用 TFTLCD简介TFTLCD使用TFTLCD特点TFTLCD的概念TFTLCD色彩空间三原色RGB颜色RGB565RGB666RGB888 ST7735S驱动芯片ST7735S引脚定义ST7735S 4线SPI模式ST7735S显示原理ST7735S分辨率ST7735S显存结构ST7735S像素点扫描模式MCU操作ST7735S显存方法 TFTLC…

解决appium或selenium使用时driver.find_element_by_xpath中间有删除线问题

一、问题描述 Darren洋在公司电脑搭建完成appium后准备运行appium2.0版本执行脚本时发现执行脚本中的driver.find_element_by_xpath中间有删除线&#xff0c;说明较高版本的appium及selenium中该方法已被弃用。 二、解决办法 该问题解决办法为将driver.find_element_by_xpath()…

广东金媒人的线下交友活动有哪些吸引点呢?

广东金媒人线下交友活动吸引人的地方还是不少的&#xff0c;这也是举办活动的机构中&#xff0c;都具备的优点。 金媒人现场活动有专业的主持人&#xff0c;可以及时帮助大家解疑答惑&#xff0c;让相亲更高效。活动场地都是比较正式、开阔的&#xff0c;一般是西餐厅类型的地方…

网络电视机顶盒怎么样?内行揭晓网络电视机顶盒排名

网络电视机顶盒怎么样&#xff1f;可以说是家家户户不可或缺的部分&#xff0c;但很多朋友买回家发现经常死机和卡顿&#xff0c;究竟要如何选择才不踩坑呢&#xff1f;我身为业内人士给各位分享业内最新发布的网络电视机顶盒排名&#xff0c;跟着我一起看看哪些网络机顶盒最值…

浅谈AI大模型技术:概念、发展和应用

AI大模型技术是指使用超大规模的深度学习模型来解决各种复杂的人工智能问题&#xff0c;如自然语言处理、计算机视觉、多模态交互等。AI大模型技术具有强大的学习能力和泛化能力&#xff0c;可以在多种任务上取得优异的性能&#xff0c;但也面临着计算、存储、通信等方面的挑战…

layui 表格 展开

一、表格嵌套表格&#xff08;手风琴打开&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>设备上下线统计</title><script type"text/javascript" src"../../../l…

【NPM】particles.vue3 + tsparticles 实现粒子效果

在 NPM 官网搜索这两个库并安装&#xff1a; npm install element-plus --save npm i tsparticles使用提供的 vue 案例和方法&#xff1a; <template><div><vue-particlesid"tsparticles":particlesInit"particlesInit":particlesLoaded&…

【C语言刷题】#define宏实现一个整数的二进制位的奇数位和偶数位交换

本篇文章目录 1. 分析如何交换1.2 得到所有奇数位1.2 得到所有偶数位1.3 奇数位和偶数位交换后相加 2. 实现交换 1. 分析如何交换 这里为了方便演示&#xff0c;使用较小的正整数&#xff08;负数也是一样的&#xff0c;只不过要用算下补码&#xff09;&#xff0c;且不用一个…

VMware Greenplum 7 正式发布!

在当今瞬息万变的商业环境中&#xff0c;企业持续寻求创新途径以优化运营、简化决策过程&#xff0c;并构建独特的竞争优势。实现这些目标的关键在于有效利用海量数据资源。然而&#xff0c;这项任务并不轻松。数据的数量、复杂性和来源呈现出爆发性增长&#xff0c;同时从数据…

Quest 3最新规则调整,降低了积分获取难度和交互Dapp数量

自上周Quest 3启动以来&#xff0c;获得来自社区小伙伴们的支持。你们的热情和参与程度超出了我们的预期&#xff0c;仅在第一天Sui Discord服务器的活动量就惊人地增长了600&#xff05;&#xff01;我们非常高兴与大家一起踏上这个旅程。 同时&#xff0c;我们也关注了到社区…

亿发软件:现代化机械制造行业建设企业一体化管理系统的必要性

机械设备制造行业作为传统制造产业&#xff0c;面临着许多挑战&#xff1a; &#xff08;1&#xff09;项目进度管理困难&#xff0c;难以迅速掌握每个项目的物料采购进度和加工件生产进度。 &#xff08;2&#xff09;采购计划难以制定&#xff0c;各个部门之间的信息交流不…

从创业者的角度告诉你AI问答机器人网页的重要性

在数字化时代&#xff0c;创业者面临着越来越多的挑战。而AI问答机器人网页正成为创业者们的必备工具。它可以提供即时客户支持、降低运营成本&#xff0c;并实现全天候服务。接下来&#xff0c;我将从创业者的角度阐述一下&#xff0c;AI问答机器人网页为什么那么重要&#xf…

10kb的照片尺寸怎么弄?几个步骤轻松搞定!

为了图片方便在互联网上分享、传输或存储&#xff0c;我们常常会有缩小图片的需求&#xff0c;那么如何进行操作呢&#xff1f;下面分享了三种实用的方法。 方法一&#xff1a;使用嗨格式压缩大师 1、在电脑上打开安装好的“嗨格式压缩大师”&#xff0c;在首界面中点击“图片…

国际十大优质期货投资app软件最新排名(综合版)

在当今的金融市场中&#xff0c;期货投资成为了越来越多人的选择。随着科技的发展&#xff0c;许多优质的期货投资app软件也应运而生。这些软件不仅提供了便捷的投资交易工具&#xff0c;还为投资者提供了丰富的市场分析和风险管理手段。 本文将介绍国际十大优质期货投资app软…

ant中的environment属性

在ant的配置文件中&#xff0c;可以设置属性environment的值&#xff0c;设置的这个值就作为访问环境变量的前缀。例如声明了environment“env”&#xff0c;那么就可以通过env.<环境变量名称>来访问环境变量。 例如创建了一个Java工程&#xff0c;在工程目录下有一个bu…

GP09|公司赚的多,股票涨的好?

量化策略开发&#xff0c;高质量社群&#xff0c;交易思路分享等相关内容 大家好&#xff0c;今天我们来分享GP09策略。前面很多期我们都不同程度用到了量价因子。这一期我们单纯的使用财务因子来构建&#xff0c;实际我们都知道单纯的财务因子中&#xff0c;已经无法get超额收…

大数据开发中的秘密武器:探索Hadoop纠删码的奇妙世界

随着大数据技术的发展&#xff0c;HDFS作为Hadoop的核心模块之一得到了广泛的应用。为了系统的可靠性&#xff0c;HDFS通过复制来实现这种机制。但在HDFS中每一份数据都有两个副本&#xff0c;这也使得存储利用率仅为1/3&#xff0c;每TB数据都需要占用3TB的存储空间。因此&…

[Linux c/c++] futex

参考&#xff1a; Pthread locks: Mutex vs Spilocks vs Futex – Deep Code DiveLocking During multi-threading or multi-processing, the biggest challenge is selecting types of locks. When writing C code, one can manually write their own locking mechanism or c…