需求一:点击左菜单,实现右边内容区域滚动定位 1、如果你使用的是ant-design Vue UI库,是可以使用自带的锚点组件的 <template> <!-- 左边菜单区 --> <a-anchor :affix="false" :get-current-anchor="getCurrentAnchor"> <!-- 一级锚点 --> <a-anchor-link href="#menu1"
问题一:点击右侧锚点左侧页面不能跟着联动,原因大概率是锚点组件没有设置key或者是key没有关联对; 问题二:点击右侧锚点左侧页面能正常滚动跳转,滑动左侧页面,右侧锚点没联动,原因大致有两种情况1、未配置:getContainer="getContainer"属性,2、配置完上面的属性还是没效果,大概率是锚点锚定的id未设置好自动滚动属性,需要...
使用Ant Design Vue的<a-anchor>和<a-anchor-link>组件来实现锚点链接。<a-anchor>组件用于创建锚点导航,而<a-anchor-link>组件用于定义具体的锚点链接。 测试锚点滚动功能: 运行你的Vue项目,并测试点击锚点链接时是否能平滑滚动到页面指定位置。 通过以上步骤,你应该能够在Ant Desig...
web端ant-design-vue-Anchor锚点组件使用小节(2) 项目开发中有幸遇到了更细化的页面滚动问题,详情中我有多个履约节点子模块,除了正常的锚点和页面联动之外,客户希望我从列表中点击某个履约模块子节点,跳转到选中的履约模块子节点下面;如果没有子节点模块,则跳转到父级履约节点模块。实现这个功能大概这么两步,1、在子...
Anchor锚点 用于跳转到页面指定位置。 何时使用# 需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。 代码演示 Part 1 Part 2 Part 3 基本使用 最简单的用法。 TS Basic demo Static demo API Anchor Props Link Props 静态位置 不浮动,状态不随页面滚动变化。
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。Function(triggerNode)() => document.body loadData用于动态加载选项,无法与showSearch一起使用(selectedOptions) => void- notFoundContent当下拉列表为空时显示的内容string'Not Found' ...
2、click + dom滚动设置 导航栏和对应的模块id需要一一对应(可写循环进行遍历) 1. 1111 <!-- 点击事件 --> goAnchor(turnId) { let anchor = this.$el.querySelector(turnId) document.documentElement.scrollTop = anchor.offsetTop } 1. 2. 3. 4. 5....
当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 页面可视范围过小时,慎用此功能以免遮挡页面内容。 事件 注意:Affix内的元素不要使用绝对定位,如需要绝对定位的效果,可以直接设置Affix为绝对定位: ...
titleThe content of hyperlinkVueNode | (item: AnchorItem) => VueNode childrenNested Anchor Link,Attention: This attribute does not support horizontal orientationAnchorItem[]- Events# Events NameDescriptionArgumentsVersion changeListening for anchor link change(currentActiveLink: string) => void1.5.0 ...