阅读量:0
在Vue中实现文章锚点功能，可以通过监听滚动事件来更新当前锚点的状态。以下是一个简单的示例：
<template> <div> <div :id="'anchor-' + index" v-for="(section, index) in sections" :key="index"> {{ section.title }} </div> <ul class="nav nav-pills"> <li v-for="(section, index) in sections" :key="index"> <p @click="scrollToAnchor(index)" :style="{ color: (activeAnchor === index)?'red':'black' }">{{ section.title }}</p> </li> </ul> </div> </template> <script> export default { data() { return { activeAnchor: 0, sections: [ { title: 'Section 1' }, { title: 'Section 2' }, { title: 'Section 3' }, // ... ], }; }, mounted() { window.addEventListener('scroll', this.updateActiveAnchor); this.updateActiveAnchor(); // 初始调用以设置初始活动锚点 }, beforeDestroy() { window.removeEventListener('scroll', this.updateActiveAnchor); }, methods: { //滚动到锚点位置 scrollToAnchor(index) { const anchorElement = document.getElementById('anchor-' + index); if (anchorElement) { //anchorElement.scrollIntoView({ behavior: 'smooth' }); 顶栏遮住了锚点 const fixedBarHeight = 63; // 假设顶栏高度px window.scrollTo({ top: anchorElement.offsetTop - fixedBarHeight, behavior: 'smooth' }); } }, //根据屏幕滚动，显示当前活动锚点 updateActiveAnchor() { this.sections.forEach((section, index) => { const element = document.getElementById('anchor-' + index); const fixedBarHeight = 63; // 假设顶栏高度是px if (element && window.scrollY >= element.offsetTop-fixedBarHeight) { this.activeAnchor = index; } }); }, }, }; </script> 在这个示例中，我们定义了一个sections数组来表示文章的不同部分。每个部分都有其对应的标题和唯一的ID。我们还维护了一个activeAnchor状态，它表示当前活动锚点的索引。
在模板中，我们使用v-for来遍历sections数组，并为每个部分创建一个可以滚动到的div元素。我们还创建了一个导航列表，其中包含了所有锚点的链接，并使用active类来表示当前活动的锚点。
在mounted钩子中，我们添加了一个事件监听器来监听滚动事件，并调用updateActiveAnchor方法来更新当前活动的锚点。在beforeDestroy钩子中，我们移除了这个事件监听器。
scrollToAnchor方法接收一个索引，并滚动到对应的锚点。updateActiveAnchor方法遍历所有锚点，并根据当前窗口的滚动位置来设置activeAnchor的值。
