详解Vue项目中实现锚点定位
程序员文章站
2023-12-14 17:01:40
背景
今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到...
背景
今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面。
解决
最终参考改问题下的回答实现了效果。
<template> <div class="score-preview-container"> <div class="content-box"> <div class="content-page-box"> <globalanalysis :id="#anchor-0" /> <errormerge :id="#anchor-1" /> <doexercise :id="#anchor-2" /> </div> <div class="nav-button-box"> <span class="nav-button-fix"> <div class="nav-button" v-for="(item,index) in buttonarr" :key="index" :class="{active : activebtn == index}" @click="goanchor('#anchor-'+index,index)">{{item}}</div> </span> </div> </div> </div> </template> <script> import { mapactions } from "vuex"; import globalanalysis from "./components/globalanalysis.vue"; import errormerge from "./components/errormerge.vue"; import doexercise from "./components/doexercise.vue"; export default { name: "score-preview", components: { globalanalysis, errormerge, doexercise }, data() { return { buttonarr: ["整体分析", "错题整理", "提分训练"], activebtn: 0 }; }, mounted() { this.datainit(); }, methods: { ...mapactions("v2-score-preview", [ "fetchclassscoredata", "fetchpersonalreportdata", "fetcherrorquestiondata", "fetchexercisedata" ]), //初始化 datainit() { this.fetchclassscoredata(); this.fetchpersonalreportdata(); this.fetcherrorquestiondata(); this.fetchexercisedata(); }, //锚点跳转 goanchor(selector, index) { this.activebtn = index; document.queryselector("#app-root").scrolltop = this.$el.queryselector(selector).offsettop; } } }; </script>
另外,文章中的第四种方法,发现使用scrollintoview()方法也能实现锚点定位的效果。
//锚点跳转 goanchor(selector, index) { this.activebtn = index; this.$el.queryselector(selector).scrollintoview() }
以上所述是小编给大家介绍的vue项目中实现锚点定位详解整合,希望对大家有所帮助