vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作

更新時(shí)間：2020年08月10日 10:30:33 作者：葉落森

這篇文章主要介紹了vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

第一步，給vue頁(yè)面添加錨點(diǎn)

.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;
}

第三步，添加監(jiān)聽事件

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滾動(dòng)事件監(jiān)聽
  var pro_detail_page = document.getElementsByClassName('productDetail')[0];
  pro_detail_page.addEventListener('scroll', this.handleScroll);
},

注：給最外層div添加height:100%后，mint-ui的輪播圖就會(huì)展示不出來。我們可以修改mint-ui的默認(rèn)overflow屬性,改為：overflow:visible

補(bǔ)充知識(shí)：使用Vuepress自動(dòng)生成markdown的目錄時(shí)，一旦標(biāo)題有數(shù)字時(shí)便無法跳轉(zhuǎn)的問題解決

問題描述

最近在用vuepress寫網(wǎng)頁(yè)文檔的時(shí)候發(fā)現(xiàn)了一個(gè)問題，就是我用markdown書寫的標(biāo)題中如果有類似 1.2 XXX 的標(biāo)題時(shí)，當(dāng)使用官方文檔給出的:

[[toc]]

自動(dòng)生成目錄時(shí)，最終生成的網(wǎng)頁(yè)，含有數(shù)字的標(biāo)題是無法跳轉(zhuǎn)到相應(yīng)位置的。

問題分析

查看官方開發(fā)文檔后發(fā)現(xiàn)，這跟vuepress的默認(rèn)配置有關(guān)，從如圖1所示markdown.slugify函數(shù)可以看到，我們需要修改其配置。

markdown.slugify函數(shù)

圖1 markdown.slugify函數(shù)

點(diǎn)擊圖中的source，跳轉(zhuǎn)到GitHub的工程頁(yè)面，可以看到如下的代碼段：

// 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)，可以知道這就是問題所在：