vue添加锚点,实现滚动页面时锚点添加相应的class操作

219 阅读 0 评论 145 点赞

我是靠谱客的博主热情翅膀，最近开发中收集的这篇文章主要介绍vue添加锚点,实现滚动页面时锚点添加相应的class操作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一步，给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)，可以知道这就是问题所在：