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

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、因为监听 会有所卡顿

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从小米14安装不上应用说起【适配64位】

一、原因 某天早上&#xff0c;同事突然对我说我换了小米14pro手机但是安装不了公司的打卡软件&#xff0c;怎么办呀。一时间&#xff0c;我也不知道原因&#xff0c;看到给我发的安装不上的截图陷入了沉思。随即打开在git仓库里找到这个项目&#xff0c;到本地编译打开&#…

STM32——STM32Cubemx的学习使用总结

文章目录 一、简介二、STM32Cube IDE与MX区别&#xff1f;三、界面介绍和使用四、使用整体框架 一、简介 STM32CubeMX是一个图形化工具&#xff0c;可以非常容易地配置STM32微控制器和微处理器&#xff0c;以及为ArmCortex-M 内核或部分 Linux 设备树生成相应的初始化C代码&…

DeepStream--测试TrafficCamNet检测模型

模型地址&#xff1a;https://catalog.ngc.nvidia.com/orgs/nvidia/teams/tao/models/trafficcamnet/version 目前模型是nvidia的加密格式etlt。 nvinfer的配置 [property] gpu-id0 net-scale-factor0.0039215697906911373 tlt-model-keytlt_encode tlt-encoded-modeltraffic…

电脑上可以写便签的软件哪些界面比较可爱且好用?

电脑上可以安装使用的便签类软件比较多&#xff0c;在选择使用电脑便签软件时&#xff0c;很多人对便签的外观界面还是比较在意的&#xff0c;一个好看的便签界面在一方面可以引起大家的注意&#xff0c;另一方面可以增加电脑桌面背景和便签类软件的协调性。 电脑便签软件通常…

层层剥开Android14升级后异常弹框的神秘面纱

本篇文章将会通过研究源码的方式给您讲述Android系统升级到Android14后出现的两个异常弹框并给出消除它们的方案。闲话少叙&#xff0c;我们开始。 问题描述 在Android 14升级后&#xff0c;出现两个弹窗的异常情况。这里是异常的截图&#xff1a; 接下来&#xff0c;我们对这…

BigDecimal的常见陷阱

文章目录 BigDecimal概述BigDecimal常见陷阱1.使用BigDecimal的构造函数传入浮点数2.使用equals()方法进行数值比较3.使用不正确的舍入模式 总结&#xff1a; BigDecimal概述 BigDecimal 是 Java 中的一个类&#xff0c;用于精确表示和操作任意精度的十进制数。它提供了高精度的…

软件需求的三大层次,逐层细化的注意事项

需求逐层分解和转化是一个持续优化的过程&#xff0c;在这个过程中&#xff0c;我们需要明确软件需求的三大层次&#xff0c;从而帮助项目团队理解组织或客户的高层目标和期望&#xff0c;满足用户的期望和需求&#xff0c;有助于产品的系统设计和开发。 一、软件需求三大层次 …

【django+vue】连接数据库、登录功能

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【djangovue专栏】 1.【djangovue】项目搭建、解决跨域访问 【djangovue】连接数据库、登录功能 django连接数据库1.安装MySQL驱动程序2.创建数据库3.配置settings.py文件4.创建表5.添加数据 登录功能1.django实现…

国外媒体套餐发稿,快速升级曝光率,数千倍转换率!

在如今数字化时代&#xff0c;国外市场的开拓对企业来说变得越发关键。应对激烈竞争&#xff0c;怎样快速升级曝光率、做到高转换率变成了重要环节。下面我们就详细介绍一种名为“国外媒体套餐内容推广”的思路&#xff0c;根据开发利用国外媒体网络资源&#xff0c;为公司实现…

Linux CentOS 8(DNS的配置与管理)

Linux CentOS 8&#xff08;DNS的配置与管理&#xff09; 目录 一、DNS相关知识1.1 DNS简介1.2 DNS的解析原理1.3 DNS解析 二、DNS服务器部署2.1 不使用chroot模式启动DNS2.2 使用chroot模式DNS 三、DNS配置文件详解3.1 主配文件详解3.2 区域数据库文件详解 四、项目实施4.1 主…

分类问题的评价指标

一、logistic regression logistic regression也叫做对数几率回归。虽然名字是回归&#xff0c;但是不同于linear regression&#xff0c;logistic regression是一种分类学习方法。 同时在深度神经网络中&#xff0c;有一种线性层的输出也叫做logistic&#xff0c;他是被输入…

白银投资的升值空间及未来趋势

在投资多样化的今天&#xff0c;人们可选择的投资产品也越来越多。白银作为具有较高价值的贵金属&#xff0c;一直以来便是仅次于黄金的贵金属投资品种&#xff0c;今年来也受到更多投资者的关注。那么白银的升值空间及未来趋势如何&#xff1f;是否值得投资&#xff1f;这边将…

酒店品牌纷纷冲击中高端,东呈集团能否“快人一步”?

过去两年酒店行业加速洗牌&#xff0c;“强者恒强”的马太效应正持续凸显。 报告显示&#xff0c;2022年排名前10名的酒店集团分别为锦江国际、华住、首旅如家、格林、东呈集团、尚美数智、亚朵、德胧、逸柏、都市酒店。以上10家酒店集团客房规模在连锁酒店市场占有率为62.36&…

Django 入门学习总结3

1、创建数据库 打开mysite/settings.py文件&#xff0c;可以看到我们使用Python中已包含的默认的数据库SQLite&#xff0c;也可以使用其他的数据库&#xff0c;如Oracle、Mysql等。里面也包含时区、语言等设置信息。 在使用数据库和表之前&#xff0c;输入下面的命令&#xf…

electron项目开机自启动

一、效果展示&#xff1a;界面控制是否需要开机自启动 二、代码实现&#xff1a; 1、在渲染进程login.html中&#xff0c;画好界面&#xff0c;默认勾选&#xff1b; <div class"intro">开机自启动 <input type"checkbox" id"checkbox&quo…

01【SpringBoot快速入门、yml语法、自动配置、整合框架】

目录 一、SpringBoot简介 1.1 Spring优缺点 1.1.1 Spring的优点 1.1.2 Spring的缺点 1.2 SpringBoot的概述 1.2.1 SpringBoot概述 1.2.2 SpringBoot的核心功能 二、SpringBoot快速入门 2.1 创建Maven工程 2.2 添加起步依赖 2.3 编写Controller 2.4 编写SpringBoot引…

论文《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;并通…

JavaWeb开发——文件上传

1 简介 文件上传&#xff1a;将本地图片、视频、音频等文件上传到服务器&#xff0c;供其他用户浏览或下载的过程 文件上传涉及到两部分&#xff1a;前端程序 服务端程序 前端程序 【三要素】&#xff1a;① 需要定义一个form 表单&#xff0c;且表单里需定义一个类型为“ …

Qt专栏3—Qt项目创建Hello World

setp1 打开软件 双击Qt Creator 11.0.3 (Community)&#xff0c;打进入软件界面 step2 创建项目 点击创建项目 step3 选择模板 选着Application&#xff08;Qt&#xff09;->Qt Widgets Application setp4 设置项目 名称中填入项目号名&#xff0c;创建路径中填入项目保存位…

基于C#实现KMP算法

一、BF 算法 如果让你写字符串的模式匹配&#xff0c;你可能会很快的写出朴素的 bf 算法&#xff0c;至少问题是解决了&#xff0c;我想大家很清楚的知道它的时间复杂度为 O&#xff08;MN&#xff09;&#xff0c;原因很简单&#xff0c;主串和模式串失配的时候&#xff0c;我…