vue添加錨點,實現滾動頁面時錨點添加相應的class操作

第一步，給vue頁面添加錨點

.orange{ color: #f97910;}

<template> <div 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.contentmethods:{ 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-ignoreimport { remove as removeDiacritics } from ’diacritics’ // eslint-disable-next-line no-control-regexconst rControl = /[u0000-u001f]/gconst 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_programnodejsnode_globalnode_modulesvuepressnode_modules@vuepressshared-utilslibslugify.js

打開 slugify.js 文件，并將上述的代碼段注釋掉，問題即可解決。

以上這篇vue添加錨點,實現滾動頁面時錨點添加相應的class操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。