为你的博客添加目录索引
一、前言
演示图例
【为你的博客添加目录索引】
需求
这个目录索引应该包含以下功能：
- 点击目录项跳转到对应锚点
- 屏幕滚动时，对应目录项样式变化
二、点击目录项跳转到对应锚点 hash模式的路由下的锚点
说到文章的目录索引，首先想到的就是锚点了。然而在
hash模式的路由下，如果使用原始的锚点方案会造成下面这样的问题。// 文章url链接,hash模式下
www.rychou.xyz/#/article/70 // 如果采用传统的锚点方式，比如有个锚点：anchor-1，点击之后，url会变成www.rychou.xyz/#anchor-1很明显，在
hash模式下，就不能采用这种方式锚点了。我采用了自定义锚点的方式。参考： vue2.0中怎么做锚点定位添加锚点和初始化目录的数据结构
方法有了，然后就是怎么给文章加添加锚点了。
我采用了遍历dom树，然后找到文章的
h1标签（暂时只对h1标签建立索引），为其添加id的方式建立索引。// 初始化文章锚点和目录数据结构
getDirectories() {
let directories = document.querySelectorAll(".article-content h1");
//找到属于文章内容的h1标签
directories.forEach((element, index) => {
element.id = "anchor-" + index;
//添加id
this.directories.push({
title: element.innerText, //h1标签文本内容
offsetTop: element.offsetTop, //记录当前h1标签的偏移量，方便后面计算滚动距离。
isActive: false //是否被选中
});
});
实现点击跳转到对应锚点
{{item.title}}methods:{
goAnchor(index) {
document.documentElement.scrollTop = this.directories[index].offsetTop;
},
}三、屏幕滚动时，对应目录项样式变化 注意我们前面初始化目录数据结构中，包含了一个叫
isActive的状态位，就是根据这个状态位来进行相应的渲染动态绑定
class 目录{{item.title}}添加滚动监听
// 挂载页面时，添加滚动监听
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
// 退出页面时，应该取消监听
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
},计算状态位
isActive handleScroll(e) {
let scrollTop = document.documentElement.scrollTop //当前滚动距离
this.directories.forEach((element,index)=>{
if((scrollTop)>=element.offsetTop){//当前滚动距离大于某一目录项时。
for(let i=0;
icss样式
// scss
.directories-container {
width: 15vw;
transition: all 0.5s;
margin-left: 10px;
.highlight-title {
border-left: 3px solid rgb(15, 105, 223);
background-color: rgb(243, 243, 243);
z-index: -1;
a{
color: rgb(15, 105, 223)
}
}
.directories-list {
position: -webkit-sticky;
position: sticky;
top: 0;
word-wrap: break-word;
background-color: #fff;
border-left: 1px solid rgb(236, 236, 236);
z-index: 999;
a {
&:hover {
text-decoration: underline;
}
}
}
}原文链接： 为你的博客添加目录索引欢迎关注公众号：开源学院
文章图片
推荐阅读
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 为什么你的路演总会超时（）
- 知识
- 奔向你的城市
- 财商智慧课（六）
- 低头思故乡——只是因为睡不着
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 吃了早餐，反而容易饿（为什么？）
- 你有婚内虐待行为吗（）
- Android中的AES加密-下