您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何在Vue項目中實現(xiàn)一個錨點定位功能,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
<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>
另外,參考頁面內錨點定位及跳轉方法總結文章中的第四種方法,發(fā)現(xiàn)使用scrollIntoView()方法也能實現(xiàn)錨點定位的效果。
//錨點跳轉 goAnchor(selector, index) { this.activeBtn = index; this.$el.querySelector(selector).scrollIntoView() }
上述內容就是如何在Vue項目中實現(xiàn)一個錨點定位功能,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。