当前位置:   article > 正文

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

vue点击侧边栏选择

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

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

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

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

  1. <ul>
  2. <li
  3. v-for="(item, index) in menuArr"
  4. :key="item.id"
  5. :title="item.title"
  6. :class="anchorIdx === index ? 'anchor_current' : '' "
  7. @click="chooseMenu(item, index)"
  8. >
  9. {{item.title}}
  10. </li>
  11. </ul>

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

  1. chooseMenu(item, index) {
  2. //保留当前点击的序列号,服务于选中样式
  3. this.anchorIdx = index
  4. //找到页面包裹每一章内容的节点数组
  5. let contentArr = document.getElementsByClassName('content')
  6. //根据点击的idx,找到对应章节,获得距离页面顶部的位置
  7. let num = contentArr[index].offsetTop
  8. //找到包裹内容页面的元素,即你的滚动条元素,如果是body,直接写windows就可以,不用找元素
  9. let view = document.getElementsByClassName('el-dialog__body')[0]
  10. //调用滚动方法
  11. view.scrollTo({ left: 0, top: num })
  12. }

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

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

  1. const view = document.getElementsByClassName('el-dialog__body')[0]
  2. view.addEventListener('scroll', this.dataScroll)
  3. dataScroll() {
  4. this.scroll = document.getElementsByClassName('el-dialog__body')[0].scrollTop
  5. },

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

  1. // 找到侧边栏所有元素
  2. let $navs = $('.anchor ul li')
  3. // 找到页面所有章节内容元素
  4. let contentArr = document.getElementsByClassName('content')
  5. for (let i = contentArr.length - 1; i >= 0; i--) {
  6. if (this.scroll >= contentArr[i].offsetTop - 100) {
  7. $navs.eq(i).addClass('current').siblings().removeClass('current ')
  8. break
  9. }
  10. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/971807
推荐阅读
相关标签
  

闽ICP备14008679号