赞
踩
侧边导航栏有两个功能要实现:
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
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。