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

news2024/10/7 20:24:51

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.scrollTop
      let index = 0
      navTop.forEach((i,k)=>{
        if(scroll>=i){
          index = k
        }
      })
      this.activeKey = index
    },
    
	onChange(v){
      this.$refs[v.name].scrollIntoView({ behavior: 'smooth' })
    },

注意的点:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1234015.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android项目更新依赖和打包步骤和问题汇总

目录 1、Android 项目打包&#xff0c;32位包升级到64位包问题一&#xff1a;ERROR: Conflicting configuration : armeabi-v7a,x86-64,arm64-v8a,x86 in ndk abiFilters cannot be present when splits abi filters are set : x86,armeabi-v7a,arm64-v8a 2、Android项目依赖升…

使用DHorse发布SpringBoot项目到K8S

前言 在介绍DHorse的操作之前&#xff0c;先来介绍一下使用k8s发布应用的步骤&#xff0c;以SpringBoot应用为例进行说明。 1.首先从代码仓库下载代码&#xff0c;比如GitLab&#xff1b; 2.接着进行构建&#xff0c;比如使用Maven&#xff1b; 3.如果要使用k8s作为编排&am…

SAP gui 登录条目不让修改

今天碰到用户安装的GUI 770 版本&#xff0c;不让修改&#xff0c;也不让添加 后面再选项里面找到了

时尚灵感 | 数说故事《2024春夏时装周研究报告》发布

过去两个月&#xff0c;2024春夏时装周如火如荼&#xff0c;我们不仅看到后疫情时代多个世界级时尚地标恢复活力&#xff0c;明星大咖云集&#xff0c;也在各大品牌秀场中感受到了艺术、摩登、自然、人文的精彩碰撞。 时装周是流行的风向标&#xff0c;每一季四大时装周的举办…

实在智能出席山东省数据科学大会,构建产学研教数智创新生态

11月18日至19日&#xff0c;由山东大学、山东省科学技术协会、山东省大数据局主办的首届“山东省数据科学大会暨泰山科技论坛”在山东大学&#xff08;中心校区&#xff09;隆重召开&#xff0c;以“数聚慧能 科创未来”为主题&#xff0c;来自全国各地的高校、科研机构、企事业…

“茶叶创新:爆改营销策略,三个月狂销2300万“

我的朋友去年制作了一款白茶&#xff0c;并在短短三个月内将其销售量推到了2300万的高峰。你相信吗&#xff1f; 这位朋友并没有任何茶叶方面的经验&#xff0c;他只是一个有着冒险精神的企业家。他先找到了一家代工厂&#xff0c;帮助他把他的茶叶理念转化为现实。 当他把茶叶…

SAP ABAP ALV “报错用户接口 XXXX的状态 XXXX丢失“

会导致功能栏无法使用 原因如下这两个名字需要对的上&#xff0c;否则就会报错

Postgresql常用命令函数

1、string_agg()函数 1.1用法: string_agg(expression, delimiter)&#xff0c;参数类型(text, text) or (bytea, bytea)&#xff0c;返回类型和参数类型一致,第一个参数是字段名&#xff0c;第二个参数是样式&#xff0c;比如&#xff0c;或者#分隔。 1.2实战: SELECT * FR…

配置文件自动提示

1、引入依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId> </dependency> 2、修改IDEA配置

为什么 ConcurrentHashMap 中 key 不允许为null

考察目标 这是一个基础问题&#xff0c;主要考察 1 到 3 年经验的开发人员 ConcurrentHashMap 在实际应用中使用频率较高 考察这个问题的目的&#xff0c;是了解求职者的基本功。 所以为了表现更好&#xff0c;可以从 ConcurrentHashMap 的设计角度去回答。 问题解析 打开…

基于C#实现协同推荐 SlopeOne 算法

一、概念 相信大家对如下的 Category 都很熟悉&#xff0c;很多网站都有类似如下的功能&#xff0c;“商品推荐”,"猜你喜欢“&#xff0c;在实体店中我们有导购来为我们服务&#xff0c;在网络上我们需要同样的一种替代物&#xff0c;如果简简单单的在数据库里面去捞&am…

CTF-栈溢出-基本ROP-【ret2syscall】

文章目录 ret2syscallBxMCTF 2023 Anti-Libcmainwrite_bufflush_obufreadintread_buf 思路exp ret2syscall 即控制程序执行系统调用&#xff0c;获取 shell。 BxMCTF 2023 Anti-Libc main write_buf 写入字符的&#xff0c;待会输出 flush_obuf 把字符输出到屏幕 read…

集群创建(flannel)时候,没有自动创建出cni0网卡

给旧的集群加入四台新的服务器启动时候发现都是正常的&#xff0c;但是pod通信报错 集群通信失败&#xff0c;第一时刻想看看是不是cni0和flannel.1的网段是不是通的&#xff0c;点进去一看发现cni0网卡没有生成。 部署是通过kubeadm方式部署的集群&#xff0c;目前有两种解决…

mysql8 group by出错:this is incompatible with sql_mode=only_full_group_by

第一步&#xff1a;先检查自己windows电脑上有没有my.ini文件&#xff0c;没有则创建一个my.ini 第二步&#xff1a;将下面内容复制进入my.ini保存&#xff0c;重启Mysql即可 [mysqld] sql_modeSTRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,…

请求的接口响应状态为已取消的原因

有趣的iframe问题 今天遇到一个问题&#xff0c;当点击了按钮----跳转页面时----F12键点击网络中的状态报了已取消&#xff0c;类型是 document说明是前端页面的问题&#xff0c;如果是xhr那可能是接口的问题。 原本是写了3个iframe,页面刷新的时候请求了第一个iframe,然后就…

android生成jks文件

jks文件用来校验微信支付 生成的方法&#xff1a;

论文《A recurrent latent variable model for sequential data》笔记:详解VRNN

A recurrent latent variable model for sequential data 背景 1 通过循环神经网络的序列建模 循环神经网络&#xff08;RNN&#xff09;可以接收一个可变长度的序列 x ( x 1 , x 2 , . . . , x T ) x (x_1, x_2, ..., x_T) x(x1​,x2​,...,xT​)作为输入&#xff0c;并通…

install安装路径设定

因为安装路径的前缀 CMAKE_INSTALL_PREFIX 都在外面都写了。 所以在具体的dll 在安装时&#xff0c;就写相对路径就行了。

基于51单片机交通灯仿真_紧急开关+黄灯倒计时+可调时间(proteus+代码+报告+讲解视频)

基于51单片机交通灯_紧急开关黄灯倒计时可调时间 ☑️开题报告☑️仿真图&#xff08;提供源文件&#xff09;&#xff1a;☑️系统硬件设计☑️主控制器选择☑️系统硬件结构图☑️时钟及复位电路☑️指示灯及倒计时模块 ☑️倒计时模块&#xff1a;☑️程序☑️软件主流程框架…

PPT画饼不能信,那现场连数据生成BI报表呢?

PPT说的天花乱坠&#xff0c;不如真正地看到、体验到BI报表效果&#xff0c;眼见为实&#xff01;奥威BI大数据分析工具推出的这套BI方案就将真实的BI报表效果搬到了BI选型会议上了&#xff0c;可以让业务人亲自上手体验三步完成BI报表分析的过程。 只需三步&#xff0c;立即生…