因为用于vue项目所以是一个.vue的组件,组件这样写后调用只需传参整体页面id和板块标题
引用代码
组件代码
<template><div class="left-nav"><div v-for="(item, index) in items" :key="index" @click="scrollToSection(item)":class="{ active: item === activeItem }" class="nav-item">{{ item }}</div><div class="nav-back" @click="backTop">回到顶部<img src="../../assets/images/productCenter/backTop.png" alt=""/></div></div>
</template><script>export default {name: 'LeftNav',props: {items: {type: Array,required: true},//传参来的标题名称topId: String//运用整体页面的id},data() {return {activeItem: '',//触发的itemobservers: []//观察数组}},mounted() {this.activeItem = this.items[0];this.setupObservers();},beforeDestroy() {this.observers.forEach(observer => observer.disconnect());},methods: {/*** 监听滚动* @param item*/scrollToSection(item) {this.activeItem = item;const element = document.querySelector(`#${item}`);if (element) {element.scrollIntoView({ behavior: 'smooth' });}},/*** 回到顶部*/backTop() {const element = document.querySelector(`#${this.topId}`);if (element) {element.scrollIntoView({ top: 0, behavior: 'smooth' });}},/*** 设置观察者*/setupObservers() {this.items.forEach(item => {const element = document.querySelector(`#${item}`);if (!element) return;const observer = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting) {this.activeItem = entry.target.id;}});}, { threshold: 0.5 }); // 设置阈值为0.5，即元素50%可见时触发observer.observe(element);this.observers.push(observer);});}}
}
</script><style scoped>.left-nav {position: fixed;top: 130px;left: 80px;width: 114px;padding: 20px 0;z-index: 999;box-sizing: border-box;background: rgba(255, 255, 255, 1);box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);border-radius: 4px 4px 4px 4px;border: 1px solid #DCDCDC;
}.nav-item {padding: 10px;font-size: 14px;cursor: pointer;text-align: center;transition: color 0.3s, border-left 0.3s;
}.nav-item:hover {color: #CF9027;
}.nav-item.active {font-weight: bold;font-size: 14px;color: #CF9027;border-left: 3px solid #CF9027;
}.nav-back {display: flex;justify-content: center;align-items: center;padding: 10px 0 0 13px;color: #CF9027;cursor: pointer;
}.nav-back img {position: relative;left: 6px;width: 16px;height: 16px;
}
</style>
