欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue項目中實現(xiàn)錨點定位

 更新時間：2019年04月24日 14:42:10   作者：機智的導演  
這篇文章主要介紹了Vue項目中實現(xiàn)錨點定位，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

背景

今天在開發(fā)限時練-提分加項目的時候，有一個需要錨點定位的需求，而在Vue項目中，使用傳統(tǒng)的在a標簽的href屬性中寫id的方法無效，會導致瀏覽器的地址改變從而跳轉(zhuǎn)到其他頁面。

解決

最終參考vue2.0中怎么做錨點定位改問題下的回答實現(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();
 },
 //錨點跳轉(zhuǎn)
 goAnchor(selector, index) {
  this.activeBtn = index;
  document.querySelector("#app-root").scrollTop = this.$el.querySelector(selector).offsetTop;
 }
 }
};
</script>

另外，參考頁面內(nèi)錨點定位及跳轉(zhuǎn)方法總結(jié)文章中的第四種方法，發(fā)現(xiàn)使用scrollIntoView()方法也能實現(xiàn)錨點定位的效果。

//錨點跳轉(zhuǎn)
goAnchor(selector, index) {
 this.activeBtn = index;
 this.$el.querySelector(selector).scrollIntoView()
}

以上所述是小編給大家介紹的Vue項目中實現(xiàn)錨點定位詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

最新評論