要做这样一个目录树,先确定一下它的功能
1、点击目录按钮的时候,蓝点滑到点击的位置
2、页面滚动到点击按钮所对应的位置
3、页面滚动时,目录树的蓝点随着滚动条滚动
第一个功能,用css来写 就可以完成
index部分
<div class="catalog">
<div class="point">
<span></span>
<p :style="{top:point+'px'}">
<i></i>
</p>
</div>
<ul >
<li v-for="(item,index) in lists" :key="index" @click="f_lis(index)">
{{item.name}}
</li>
</ul>
</div>
css部分
.catalog{
position: fixed;
display: flex;
height: 500px;
width: 10%;
bottom: 50px;
right: 2%;
ul{
list-style: none;
color: #999;
}
li{
padding: 15px 10px;
font-size: 15px;
cursor: pointer;
}
.point{
position: relative;
padding: 0 10px;
span{
display: block;
width: 1px;
height: 450px;
background: #ccc;
}
p{
position: absolute;
left: -1px;
top: 13px;
padding: 5px;
background: #d0e2f6;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid #fff;
transition: all 0.2s linear;
}
i{
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #0079fe;
}
}
所用到的data数据
lists:[
{
target:"basic",
name:"基本信息"
},
{
target:"synthesis",
name:"综合情况"
},
{
target:"bazaar",
name:"地理位置"
},
{
target:"optimization",
name:"个人优点"
},
{
target:"preferences",
name:"生活喜好"
},
{
target:"dongguan",
name:"个人荣誉"
},
{
target:"overseas",
name:"生平事迹"
},
{
target:"after",
name:"售后服务"
},
// {
// target:"basic",
// name:"作品集"
// },
]
这个时候点击目录的时候,蓝点已经可以跟随移动了,这就可以开始第二个功能了,让页面跟着点击的移动
f_lis(i,scroll=false){
this.point=this.state+i*50
if(!scroll){
this.scroll=false
document.getElementsByClassName('anchor')[i].scrollIntoView({behavior:'smooth',block:'start',inline:'start'});
setTimeout(()=>{
this.scroll=true
},1000)
}
},
第三个功能
mounted(){
this.lists_arr=[]
for(let a=0;a<this.lists.length;a++){
this.lists_arr.push(
this.$refs['list'+a].$el.getBoundingClientRect().height
)
}
console.log(this.lists_arr);
},
watch:{
index(newVal,old){
if(this.scroll){
this.f_lis(newVal,true)
}
}
},
methods:{
getScroll(event){
this.lists.forEach((item,index) => {
let top=this.$refs[item.target].getBoundingClientRect().top
if(top<0 && Math.abs(top)<this.lists_arr[index]){
this.index=index
}
})
},
}