2021-03-22 vue实现锚点跳转scrollIntoVi

数据结构

modelList=[
  {
    name:'课程内容'，
    modelCode:'KTFK'
  },
  {
    name:'重难点视频讲解'，
    modelCode:'KTFK'
  }......
]

左边模块小标题 右边模块内容

// 标题
<div v-for="(item, index) in modelList"  :class="index === currentMenu ? 'checked' : ''" :key="index"  @click="menuSelect(index)">
  <span>{{item.name}}</span>
</div>

//内容
<el-card ref="model" :id="item.modelCode" class="margin-bottom-20" shadow="always" :body-style="{ padding: '0 20px 20px' }" v-for="item in modelList" :key="item.id">
  <div slot="header">
    <span class="font-16 text-bold">内容</span>
  </div>
</el-card>

menuSelect(index){
  // 滚到指定元素
  this.$el.querySelector(`#${this.modelList[index].modelCode}`).scrollIntoView({
    behavior: 'smooth'
  })
},
// 滚动定位 用于左边菜单栏 标记为选中 绿色
    scrollEvent(e) {
      let scrollTop = e.target.scrollTop
      // 课程名称是写死的。这里做了特殊判断处理
      let firstHeight = this.$refs.fileName.$el.offsetHeight + 20
      if (scrollTop < firstHeight) {
        this.currentMenu = -1
      } else {
        let modelHeight = 0
        for (let i = 0; i < this.modelList.length; i++) {
          modelHeight += this.$refs.model[i].$el.offsetHeight + 20
          if (scrollTop - firstHeight - modelHeight < 0) {
            this.currentMenu = i
            break
          }
        }
      }
    },