vue中锚点的实现

大概要实现的模型就是这样的。那首先，我们先完成第一步，滚动条滚动到相应的锚点列表对象中。

<div ref="scrollPanel" class="container" @scroll="onScroll">
</div>
data(){
return{
isRun:false,  //判断是否是锚点点击跳转还是滚动条自动移动。是锚点点击的是就true
timeout:null,
triggerTop: 50,// 触发更新value时距离顶部的距离 px
isShowTabs:false , //是否显示锚点div
pointList:["实体1"，"实体2","实体3"],  //锚点对应的内容的锚头
pointName :'实体1' //判断锚点激活的状态
   }
}
method:{
//滚动监听事件
onScroll(e){
if（!this.isRun）{
// 使用setTimeout节流，防止执行太频繁
this.timeout&&clearTimeout(this.timeout)
 this.timeout = setTimeout(() => {
//判断是否要显示锚点div
this.isShowTabs=this.$refs.scrollPanel.scrollTop>=86  
 this.pointList.some((item, index) => {
 let dom=this.$refs[item]
let top=this.$refs.scrollPanel.scrollTop+this.triggerTop+86    //加上锚点的高度以及距离顶部的距离
if(top>dom.scrollTop&&top<=dom.offsetTop + dom.offsetHeight){
this.pointName = item
return true // 跳出循环
   }
 }）
 }，50）
 }else{
 this.isRun=false
 }
}

s实现好了滚动条滚动到对应的锚点后，接下来就要实现的是锚点点击，跳到对应的位置

method:{
//锚点点击事件
onPointClick(item){
 this.pointName=item
 //实现平滑滚动的效果
 const scrollTop=this.$refs[item].offsetTop-86
 const step=Math.abs(this.$refs.scrollPanel.scrollTop-scrollTop)/10
 this.frameScroll(this.$refs.scrollPanel.scrollTop,scrollTop,step)
}
frameScroll(srcollNow.srcollItem,step,callback){
this.isRun = true // 不触发onScroll的方法
  const type = srcollNow > srcollItem ? 'up' : 'down'
  if(type==="up"){
  const distance=srcollNow-srcollItem
  scrollNow = distance > step ? scrollNow - step : srcollItem
   this.$refs.scrollPanel.scrollTop = scrollNow
  }else{
  const distance=srcollItem-srcollNow
    scrollNow = distance < step ? srcollItemp :scrollNow +step
       this.$refs.scrollPanel.scrollTop = scrollNow
  }
  if(srcollNow!==srcollItem){
  window.requestAnimationFrame(()=>{
    this.frameScroll(scrollNow, scrollTo, step, callback)
  })
  } else {
        callback && callback()
      }
}

这样，一个比较完整的锚点功能就算实现了。