vue 滚动目录树

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

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
                }
            })
        },

}