简单记录—vue 用js方法实现侧边导航栏联动选择

侧边导航栏有两个功能要实现：

1、选择任意一条页面滚动到指定目录位置

2、页面内容滚动侧边栏跟随一起滚动

页面结构部分，根据数据循环写一个ul > li，生成侧边目录

<ul>
  <li
    v-for="(item, index) in menuArr"
    :key="item.id"
    :title="item.title"
    :class="anchorIdx === index ? 'anchor_current' : '' "
    @click="chooseMenu(item, index)"
  >
     {
   
   {item.title}}
  </li>
</ul>

解决第一个需求，点击任意一条目录页面滚动到对应内容

chooseMenu(item, index) {
    //保留当前点击的序列号，服务于选中样式
    this.anchorIdx = index

    //找到页面包裹每一章内容的节点数组
    let contentArr = document.getElementsByClassName('content')

    //根据点击的idx，找到对应章节，获得距离页面顶部的位置
    let num = contentArr[index].offsetTop

    //找到包裹内容页面的元素，即你的滚动条元素，如果是body，直接写windows就可以，不用找元素
    let view = document.getElementsByClassName('el-dialog__body')[0]
    
    //调用滚动方法
    view.scrollTo({ left: 0, top: num })
}

解决第二个需求，页面滚动，目录跟着滚动

页面初始化的时候，给内容滚动的元素加一个侦听事件，定义一个变量 scroll 用来保存当前滚动的数值

const view = document.getElementsByClassName('el-dialog__body')[0]
view.addEventListener('scroll', this.dataScroll)


dataScroll() {
  this.scroll = document.getElementsByClassName('el-dialog__body')[0].scrollTop
},

因为滚动要跟着一起变，所以要在 watch 里面实时监听scroll的变化，发生变化时，判断当前距离顶部最近的是第几章，得到index把侧边目录栏选中样式改为对应的即可实现

// 找到侧边栏所有元素
let $navs = $('.anchor ul li')

// 找到页面所有章节内容元素
let contentArr = document.getElementsByClassName('content')

for (let i = contentArr.length - 1; i >= 0; i--) {
    
    if (this.scroll >= contentArr[i].offsetTop - 100) {
       $navs.eq(i).addClass('current').siblings().removeClass('current ')
       break
     }
}

简单记录—vue 用js方法实现侧边导航栏联动选择

猜你喜欢