目录
组件挂载首页home.vue
<template>
<div class="box">
<div class="content">
<navbar></navbar>
<conter></conter>
<bottom></bottom>
</div>
<div class="footer">
<Myfooter></Myfooter>
</div>
</div>
</template>
navbar.vue主要方法在这里面
<template>
<div>
<div v-for="(item,index) in title_list" :key="item.id" :value='item.title' @click="jump(index)" class="list1">
{{item.title}}
</div>
</div>
</template>
<script>
export default {
data () {
return {
title_list: [
{ title: '撒旦法', active: true },
{ title: 'sdfwe', active: false },
{ title: '官方规划', active: false },
{ title: '官方规是划', active: false },
],
}
},
methods: {
jump (index) {
var items = document.querySelectorAll(".scroll-item"); // 给每个组件最外层加个class名字scroll-item
for (var i = 0; i < items.length; i++) {
if (index === i) {
items[i].scrollIntoView({
block: "start",//默认跳转到顶部
behavior: "smooth"//滚动的速度
});
}
}
},
// onScroll (e) {
// let scrollItems = document.querySelectorAll(".scroll-item");
// for (let i = scrollItems.length - 1; i >= 0; i--) {
// // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
// let judge =
// e.target.scrollTop >=
// scrollItems[i].offsetTop - scrollItems[0].offsetTop;
// if (judge) {
// this.activeStep = i;
// break;
// }
// }
// },
}
}
</script>
<style lang="less" scoped>
.list1 {
height: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-content: center;
flex-wrap: wrap;
cursor: pointer;
font-family: MicrosoftYaHeiLight;
font-size: 18px;
line-height: 30px;
letter-spacing: 0px;
/* Mono/Black */
color: #000000;
div {
height: 30px;
}
}
</style>
然后再给每个组件最外层加个class名字scroll-item
conter.vue
<template>
<div class="scroll-item box1">
</div>
</template>
bottom.vue
<template>
<div class="scroll-item box2">
</div>
</template>
Myfooter.vue
<template>
<div class="scroll-item box3">
</div>
</template>
推荐博主
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!