第一步，給vue頁面新增錨點

.orange{
  color: #f97910;
}

<template>
  <div class="productDetail" ref="content">
    <div class="tabbar">        
      <div @click.prevent="tabclick(index)" v-for="(item,index) in productTile" :key="index" :class="{orange:index==current}">{{item}}</div>    
    </div>
    <div id="0">...</div>
    <div id="1">...</div>
    <div id="2">...</div>
  </div>
<template>

tabclick(index){
  this.current=index;
  let anchorElement = document.getElementById(index);
  if(anchorElement) { anchorElement.scrollIntoView(); } 
},

第二步：給class為productDetail的<div>部分加height:100%;overflow-y: scroll;

.productDetail { 
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

第三步，新增監聽事件

document.getElementsByClassName('productDetail')[0]; vue中同理於：this.$refs.content

methods:{
  handleScroll(el) {
    this.scrollTop = this.$refs.content.scrollTop;
    if (this.scrollTop >= 460) {
      this.current = 2
    } else if (this.scrollTop < 460 && this.scrollTop >= 360) {
      this.current = 1
    } else {
      this.current = 0
    }
   },},mounted() {
  //scoll滾動事件監聽
  var pro_detail_page = document.getElementsByClassName('productDetail')[0];
  pro_detail_page.addEventListener('scroll',this.handleScroll);
},

注：給最外層div新增height:100%後，mint-ui的輪播圖就會展示不出來。我們可以修改mint-ui的預設overflow屬性,改為：overflow:visible

補充知識：使用Vuepress自動生成markdown的目錄時，一旦標題有數字時便無法跳轉的問題解決

問題描述

最近在用vuepress寫網頁文件的時候發現了一個問題，就是我用markdown書寫的標題中如果有類似 1.2 XXX 的標題時，當使用官方文件給出的:

[[toc]]

自動生成目錄時，最終生成的網頁，含有數字的標題是無法跳轉到相應位置的。

問題分析

檢視官方開發文件後發現，這跟vuepress的預設配置有關，從如圖1所示markdown.slugify函式可以看到，我們需要修改其配置。

markdown.slugify函式

圖1 markdown.slugify函式

點選圖中的source，跳轉到GitHub的工程頁面，可以看到如下的程式碼段：

// string.js slugify drops non ascii chars so we have to
// use a custom implementation here
// @ts-ignore
import { remove as removeDiacritics } from 'diacritics'
 
// eslint-disable-next-line no-control-regex
const rControl = /[\u0000-\u001f]/g
const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g
 
export = function slugify (str: string): string {
 return removeDiacritics(str)
 // Remove control characters
  .replace(rControl,'')
  // Replace special characters
  .replace(rSpecial,'-')
  // Remove continous separators
  .replace(/\-{2,}/g,'-')
  // Remove prefixing and trailing separtors
  .replace(/^\-+|\-+$/g,'')
  // ensure it doesn't start with a number (#121)
  .replace(/^(\d)/,'_$1')
  // lowercase
  .toLowerCase()
}

看到了其中有一句ensure it doesn't start with a number (#121)，可以知道這就是問題所在：

// ensure it doesn't start with a number (#121)

.replace(/^(\d)/,'_$1')

我們的標題數字被這句程式碼替換掉了，導致最終的連結根本沒有指向標題，故無法跳轉。

問題解決

根據GitHub頁面上的配置路徑，找到自己安裝的vuepress模組的配置路徑，我的路徑是：

D:\my_program\nodejs\node_global\node_modules\vuepress\node_modules\@vuepress\shared-utils\lib\slugify.js

開啟 slugify.js 檔案，並將上述的程式碼段註釋掉，問題即可解決。

以上這篇vue新增錨點,實現滾動頁面時錨點新增相應的class操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。