介绍 & lt; template>
& lt; div 类=皊core-preview-container"祝辞
,& lt; div 类=癱ontent-box"比;
,& lt; div 类=癱ontent-page-box"比;
& lt;才能GlobalAnalysis : id=? anchor-0",/比;
& lt;才能ErrorMerge : id=? anchor-1",/比;
& lt;才能DoExercise : id=? anchor-2",/比;
,& lt;/div>
,& lt; div 类=皀av-button-box"比;
& lt;才能span 类=皀av-button-fix"比;
& lt;才能div 类=皀av-button", v=?项目、索引),拷贝buttonArr",:关键=癷ndex",:类=皗active : activeBtn ==,指数}“,@click=癵oAnchor(& # 39; # & # 39;锚+指数,指数)“在{{项}}& lt;/div>
& lt;才能/span>
,& lt;/div>
,& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
{import mapActions },得到“vuex";
import GlobalAnalysis 得到“。/组件/GlobalAnalysis.vue";
import ErrorMerge 得到“。/组件/ErrorMerge.vue";
import DoExercise 得到“。/组件/DoExercise.vue";
export default {
,名字:“score-preview",
,组件:{GlobalAnalysis的不同之处是,ErrorMerge, DoExercise },
,数据(){
,return {
buttonArr才能:,“整体分析,,,“错题整理“,,“提分训练“),
activeBtn才能:0
,};
},
,安装(){
,this.dataInit ();
},
,方法:{
,……mapActions (“v2-score-preview",, (
“fetchClassScoreData",才能
“fetchPersonalReportData",才能
“fetchErrorQuestionData",才能
“才能fetchExerciseData"
,),
,//初始化
,dataInit (), {
this.fetchClassScoreData才能();
this.fetchPersonalReportData才能();
this.fetchErrorQuestionData才能();
this.fetchExerciseData才能();
},
,//锚点跳转
,goAnchor(选择器,指数),{
时间=this.activeBtn 才能;指数;
document.querySelector才能(“# app-root") .scrollTop =,。美元el.querySelector .offsetTop(选择);
,}
,}
};
& lt;/script> //锚点跳转
goAnchor(选择器,指数),{=,this.activeBtn 指数;
这。美元el.querySelector(选择).scrollIntoView ()
}
本篇文章为大家展示了如何在Vue项目中实现一个锚点定位功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
另外,参考页面内锚点定位及跳转方法总结文章中的第四种方法,发现使用scrollIntoView()方法也能实现锚点定位的效果。
上述内容就是如何在Vue项目中实现一个锚点定位功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
