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 }

相关推荐
JinSo10 分钟前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌17 分钟前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero21 分钟前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰23 分钟前
eduAi-智能体创意平台
前端·vue.js
golang学习记31 分钟前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴38 分钟前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw42 分钟前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物1 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
菜鸟‍2 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
小光学长2 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js