js实现页面滚动时自动切换Sidebar标签,点击标签自动滚动页面

news/2024/2/29 4:32:41

js实现页面滚动时自动切换Sidebar侧边导航标签,点击标签自动滚动页面

        <van-sidebar class="sidebar" v-model="activeKey"><van-sidebar-item :title="i.title" @click="onChange(i)" v-for="(i,k) in activeList" :key="k"/></van-sidebar><div class="filtratePopup_main"><div class="content" ref="anchor" @scroll="handleScroll"><div class="device_title" ref="device">设备配置</div><div class="item_list"><div @click="deviceItemClick(item)"  class="item van-ellipsis" v-for="(item,index) in deviceList" :key="index">{{item.equipmentName}}</div></div><div class="device_title" ref="environment">环境配置</div><div class="item_list"><div @click="deviceItemClick(item)"  class="item van-ellipsis" v-for="(item,index) in deviceList" :key="index">{{item.equipmentName}}</div></div><div style="height: 50vh;"></div></div>

方法:

methods: {handleScroll(v){let navList = document.querySelectorAll('.device_title')let navTop = []navList.forEach(i=>{navTop.push(i.offsetTop)})let scroll = this.$refs.anchor.scrollToplet index = 0navTop.forEach((i,k)=>{if(scroll>=i){index = k}})this.activeKey = index},onChange(v){this.$refs[v.name].scrollIntoView({ behavior: 'smooth' })},

注意的点:

1、如果最后一个内容过少,可能会出现点击最后一个,Sidebar导航定位到上面的问题,需要看情况加上底部内容
在这里插入图片描述
2、因为监听 会有所卡顿


https://www.xjx100.cn/news/3091934.html

相关文章

关于校园网使用罗技flow功能

目录 情况概述问题及解决方案 情况概述 我目前设备是一台Macbook air m1处理器&#xff0c;学校给配了一台windows台式&#xff0c;台式机不能连蓝牙&#xff0c;不能连wifi&#xff0c;只能用网线&#xff0c;我的需求是想让mac和windows共用一套键鼠&#xff0c;在了解到罗技…

magisk 手机卡重启界面记录

中午发现手机自动关机了&#xff0c;开机后无限卡重启界面&#xff0c;但是可以进 rec 和 fastboot。怀疑是之前安装的 magisk 模块导致卡重启。不过值得一提的是&#xff0c;虽然自动关机的问题此前也出现过几次&#xff0c;但是都没有出现过卡重启的情况。 解决问题 进 rec …

【python学习】基础篇-常用模块-shutil文件和目录操作

shutil模块是Python标准库中的一个模块&#xff0c;提供了对文件和目录进行高级操作的函数。 以下是shutil模块的一些常用函数&#xff1a; 1.复制文件&#xff1a; 将源文件src复制到目标文件dst。如果follow_symlinks为True,则会跟随符号链接。 shutil.copy(src, dst, *, f…

企业app软件定制开发的重点是什么?|小程序网站搭建

企业app软件定制开发的重点是什么&#xff1f;|小程序网站搭建 在当今数字化时代&#xff0c;企业对于信息技术的依赖越来越大。为了适应市场需求并提高内部运营效率&#xff0c;许多企业开始寻求定制开发企业app软件。这种定制开发可以根据企业的具体需求和业务流程进行个性化…

活动回顾 | 数字外贸私享会【上海站】成功举办

11月17日&#xff0c;由箱讯科技主办的数字外贸高端定制私享会【上海站】成功举办&#xff01;本次会议的主题为“新模式、新商机、新政策”&#xff0c;外贸行业的老板、企业家们齐聚一堂&#xff0c;凝聚共识&#xff0c;共话数字外贸的新趋势和新机遇。 近年来&#xff0c;数…

工业领域的设备“监测”和“检测”有何区别?

在工业领域中&#xff0c;设备的监测和检测是关键的运维活动&#xff0c;它们在保障设备可靠性和生产效率方面发挥着重要作用。尽管这两个术语经常被人们混为一谈&#xff0c;但它们在含义和应用上存在一些关键区别。 "监测"与"检测"的概念 1. 监测&#…

如何使用SD-WAN提升物流供应链网络效率

案例背景 本次分享的物流供应链企业是一家国际性的大型企业&#xff0c;专注于提供全球范围内的物流和供应链解决方案。案例用户在不同国家和地区均设有多个分支机构和办公地点&#xff0c;以支持客户需求和业务运营。 在过去&#xff0c;该企业用户使用传统的MPLS网络来连接各…

亚马逊第二个大语言模型 Olympus 即将上线

据外媒爆料&#xff0c;亚马逊正在训练他的第二个大语言模型——Olympus&#xff0c;很有可能在今年12月份上线。亚马逊计划将Olympus接入在线零售商店、Echo等设备上的Alexa语音助手&#xff0c;并为AWS平台提供新的功能。据说这个大语言模型规模达到2万亿&#xff08;2000B&a…