Vue3实现锚点定位

效果演示

代码:

javascript 复制代码
<script lang="ts" setup>
/** 使用 ref 管理锚点元素 */
const abTcomptionRef = ref<HTMLElement | null>(null);
const openClassessRef = ref<HTMLElement | null>(null);
const contestPrivilegesRef = ref<HTMLElement | null>(null);
const competitionExamplesRef = ref<HTMLElement | null>(null);
const conDynamicsRef = ref<HTMLElement | null>(null);

const titleList = reactive([
  { name: 'first', path: 'abTcomption' },
  { name: 'second', path: 'openClassess' },
  { name: 'three', path: 'contestPrivileges' },
  { name: 'four', path: 'competitionExamples' },
  { name: 'five', path: 'conDynamics' }
])
const anchorRefs = {
  abTcomption: abTcomptionRef,
  openClassess: openClassessRef,
  contestPrivileges: contestPrivilegesRef,
  competitionExamples: competitionExamplesRef,
  conDynamics: conDynamicsRef
}; 
const elementList = reactive([
  {
    name: 'first',
    ref: 'abTcomptionRef',
    path: 'abTcomption',
    component: shallowRef(aboutTheCompetition),
    color: '#252635'
    //   show: Number(props.type) === 1,
  },
  {
    name: 'second',
    ref: 'openClassessRef',
    path: 'openClassess',
    component: shallowRef(openClasses),
    color: '#0A0B15',
    showMore: true,
    pageMore: false
  },
  {
    name: 'three',
    ref: 'contestPrivilegesRef',
    path: 'contestPrivileges',
    component: shallowRef(contestPrivileges),
    color: '#252635'
  },
  {
    name: 'four',
    ref: 'competitionExamplesRef',
    path: 'competitionExamples',
    component: shallowRef(competitionExamples),
    color: '#0A0B15',
    showMore: true,
    pageMore: false
  },
  {
    name: 'five',
    ref: 'conDynamicsRef',
    path: 'conDynamics',
    component: shallowRef(contestDynamics),
    color: '#252635',
    showMore: true,
    pageMore: false
  }
])

/** 跳转到锚点位置 */
const anchorPosition = (anchor: string) => {
  const ref2 = anchorRefs[anchor];
  console.log('ref');
  console.log(ref2);
  if (ref2 instanceof Array) {
    ref2[0].scrollIntoView({ behavior: 'smooth' });//设置滚动到实例位置
  } else if (Object.prototype.toString.call(ref2).indexOf('HTMLDivElement') > -1) {
    ref2.scrollIntoView({ behavior: 'smooth' });
  } else {
    console.warn(`未找到锚点元素: ${anchor}`);
  }
};
</script>
html 复制代码
<template>
    <div class="flex gap-10 my-20px w-[70%] m-auto">
        <template v-for="(item, index) in titleList" :key="index">
            <div class="tag" :class="{ active: item.path === currentPath }" @click="anchorPosition(item.path)">
            {{ item.name }}
            </div>
        </template>
    </div>
    <div :ref="(el) => { anchorRefs[item.path] = el }"
        v-for="(item, index2) in elementList"
        :style="{ backgroundColor: item.color }"
        :class="['pt-[6px]', !item.showMore||dataList[item.ref]?.length <=3 ? 'pb-[80px]' : 'pb-[40px]']"
        :key="index2">
        <div class="container-title">{{ item.name }}</div>
        <div class="w-[70%] m-auto">
            <component :is="item.component" :dataContent="dataList[item.ref]" />
        </div>
    </div>
</template>

知识点一:

使用shallowRef可以实现浅层响应式引用组件实例,当对象的深层属性发生变化时不会触发视图更新,提高了性能

知识点二:

由于引用组件实例,组件未挂载完成就获取ref,会出现此ref还未完全获取到组件撑开区域的高度,就会出现锚点滚动定位位置错乱的问题,修改ref写法,(el)=> {anchorRefs[item.path] = el }

相关推荐
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js