96 lines
1.7 KiB
Vue
96 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="sticky" v-show="shouldShow">
|
|
<div
|
|
class="sticky-box"
|
|
@click="navigateTo(index)"
|
|
v-for="(item, index) in sections"
|
|
:key="index"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'StickyNavigation',
|
|
props: {
|
|
// 接收父组件传递的导航项数据
|
|
sections: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
shouldShow: false
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// handleScroll(){
|
|
|
|
// console.log("滚动条事件");
|
|
|
|
|
|
// },
|
|
checkScreenHeight() {
|
|
|
|
console.log(9999);
|
|
|
|
const screenHeight = window.innerHeight;
|
|
// 可以根据实际需求调整阈值
|
|
this.shouldShow = screenHeight >= 900;
|
|
|
|
|
|
},
|
|
// 点击导航项时，向父组件发送事件和索引
|
|
navigateTo(index) {
|
|
// console.log('子组件触发导航，索引:', index);
|
|
// $emit 向父组件发送 'navigate' 事件，并传递索引
|
|
this.$emit('navigate', index);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.checkScreenHeight();
|
|
// window.addEventListener('scroll', this.handleScroll);
|
|
},
|
|
beforeDestroy() {
|
|
// window.removeEventListener('scroll', this.handleScroll);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.sticky {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
z-index: 100;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.sticky-box {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin: 0 20px;
|
|
padding: 10px 20px;
|
|
color: #000;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.sticky-box:hover {
|
|
color: #366EF4;
|
|
background-color: #f0f8ff;
|
|
}
|
|
</style>
|