要做这样一个目录树，先确定一下它的功能

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*50if(!scroll){this.scroll=falsedocument.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().topif(top<0 && Math.abs(top)<this.lists_arr[index]){this.index=index}})},}