Na verdade, o método é muito simples e exigiu muitos desvios. Vi vários métodos usados por outras pessoas, mas não consegui perceber sozinho. Não percebi que era tão simples até perceber. Só precisa de algumas linhas de código.
O que estou fazendo é um pequeno projeto imitando a homepage do bilibili, embora seja muito simples.
Abaixo está uma captura de tela da página anterior:
A função é muito simples, clique na barra de navegação direita para pular para a classificação do conteúdo do local correspondente e, ao mesmo tempo, a cor da barra de navegação direita mudará após clicar.
Primeiro, vamos dar uma olhada em como é o efeito mais contundente:
Este é o efeito suave:
Na verdade, o código mais crítico consiste em apenas algumas frases, que são postadas da seguinte forma:
jump(index) {
this.jumpid = index; //用于点击右侧导航栏的时候，选中部分显示背景色
let jumpitem = document.getElementsByName("jumpitem"); //得到所有的title，包括游戏，音乐，番剧这些
jumpitem[index].scrollIntoView({
behavior:'smooth',
block:'start'
});
},Entre eles, a função scrollIntoView desempenhou um papel decisivo.
o comportamento deve ser escrito como suave
bloco pode escrever início ou fim, claro, o padrão é início
Código completo:
<template>
<div class="content">
<div class="dh" name="jumpitem" ref="content1" :id="'id'+index">动画</div>
<div class="donghua">
<ul class="firstPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="zb" name="jumpitem" ref="content2" :id="'id'+index">直播</div>
<div class="zhibo">
<ul class="secondPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="fj" name="jumpitem" ref="content3" :id="'id'+index">番剧</div>
<div class="fanju">
<ul class="thirdPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="yy" name="jumpitem" ref="content4" :id="'id'+index">音乐</div>
<div class="yinyue">
<ul class="forthPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="wd" name="jumpitem" ref="content5" :id="'id'+index">舞蹈</div>
<div class="wudao">
<ul class="fifthPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="yx" name="jumpitem" ref="content6" :id="'id'+index">游戏</div>
<div class="youxi">
<ul class="sixthPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<!-- 导航栏 -->
<div class="navfield">
<div class="navbox">
<div
class="navitems"
v-for="(item, index) in navitems"
:key="item"
:class="{ activated: jumpid == index }"
>
<a @click="jump(index)" class="nava">{
{
item.title
}}</a>
</div>
</div>
</div>
<div class="top">
<a href="">顶部</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
"第一个内容",
"第二个内容",
"第三个内容",
"第四个内容",
"第五个内容",
"第六个内容",
"第七个内容",
"第八个内容",
"第九个内容",
"第十个内容",
],
//'动画','直播','番剧','音乐','舞蹈','游戏'
navitems: [
{
title: "动画",
pointer: "animation",
},
{
title: "直播",
pointer: "live",
},
{
title: "番剧",
pointer: "banngumi",
},
{
title: "音乐",
pointer: "music",
},
{
title: "舞蹈",
pointer: "dance",
},
{
title: "游戏",
pointer: "game",
},
],
jumpid: 0,
naviitemstate: true, //点击导航栏时，暂时停止监听页面滚动
};
},
methods: {
jump(index) {
this.jumpid = index; //用于点击右侧导航栏的时候，选中部分显示背景色
let jumpitem = document.getElementsByName("jumpitem"); //得到所有的title，包括游戏，音乐，番剧这些
jumpitem[index].scrollIntoView({
behavior:'smooth',
block:'start'
});
// jumpitem[index].scrollIntoView();
},
},
mounted() {
},
};
</script>
<style scoped>
* {
padding: 0;
margin: 0;
text-decoration: none;
}
.dh {
font-size: 1.8em;
}
.zb {
font-size: 1.8em;
}
.fj {
font-size: 1.8em;
}
.yy {
font-size: 1.8em;
}
.wd {
font-size: 1.8em;
}
.yx {
font-size: 1.8em;
}
ul {
list-style: none;
}
.a1 {
display: inline-block;
width: 233px;
height: 150px;
}
.content {
width: 70%;
margin-left: 200px;
}
.donghua {
width: 1200px;
height: 400px;
}
.zhibo {
width: 1200px;
height: 400px;
}
.fanju {
width: 1200px;
height: 400px;
}
.yinyue {
width: 1200px;
height: 400px;
}
.wudao {
width: 1200px;
height: 400px;
}
.youxi {
width: 1200px;
height: 400px;
}
.firstPart {
display: flex;
flex-wrap: wrap;
}
.firstPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.secondPart {
display: flex;
flex-wrap: wrap;
}
.secondPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.thirdPart {
display: flex;
flex-wrap: wrap;
}
.thirdPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.forthPart {
display: flex;
flex-wrap: wrap;
}
.forthPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.fifthPart {
display: flex;
flex-wrap: wrap;
}
.fifthPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.sixthPart {
display: flex;
flex-wrap: wrap;
}
.sixthPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.navfield {
position: relative;
}
.navbox {
background-color: #fff;
position: fixed;
top: 300px;
right: 10px;
border: 1px solid black;
border-radius: 10px;
}
.navitems {
width: 80px;
height: 50px;
text-align: center;
border-radius: 10px;
}
.top {
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
margin-top: 10px;
border: 1px solid black;
position: absolute;
right: 24px;
bottom: 270px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
color: black;
}
.nava {
display: inline-block;
margin-top: 10px;
cursor: pointer;
}
.activated {
background-color: rgba(64, 160, 209, 1);
}
</style>
Efeito geral da página:
O componente atual inclui apenas o conteúdo da captura de tela agora, e o outro conteúdo pertence a outros componentes.
Se você tiver alguma dúvida, fique à vontade para se comunicar na área de comentários. Acho que esse código é muito simples de escrever. Se você não entender, vocês podem discutir isso juntos. Vocês podem usar a área de comentários ou mensagem privada