VUE tab栏选中状态与滚动项展示状态对应

实现效果

请添加图片描述

实现思路

  1. 记录滚动容器、滚动项的ref
  2. 点击某一项tab时,滚动对应项到界面上
  3. 监听滚动容器滚动,计算展示在界面的滚动项,选中对应tab项

关键代码

html

<!-- tab栏 -->
<a-tabs id="template-tab" v-model:activeKey="activeKey" tab-position="left" @change="onChangeTab"><a-tab-pane v-for="tab in tabs" :key="tab.value" :tab="tab.name"></a-tab-pane>
</a-tabs>
<!-- 滚动容器 -->
<div ref="scrollEl"><!-- 滚动项 --><divv-for="(list, index) in ListByTab":ref="(res) => setTabListRef(index, res)":key="index"></div>
<div>

ts

const activeKey = ref<number>(0);
const tabs = ref([{ ...defaultTab }]);
const tabListRefs = ref<any[]>([]);
const scrollEl = ref();
const { y } = useScroll(scrollEl);
const ListByTab = ref<Item[][]>([[]]);
const tabChanging = ref<boolean>(true);function onChangeTab(tabKey: number) {tabChanging.value = false;keyword.value = '';nextTick(() => {let el = tabListRefs.value[tabKey]?.$el;if (tabListRefs.value[tabKey] instanceof HTMLElement) {el = tabListRefs.value[tabKey];}el?.scrollIntoView?.({ block: 'start' });tabChanging.value = true;});
}function setTabListRef(index: number, res: any) {tabListRefs.value[index] = res;
}/*** 滑动后更新选中哪个分组*/
const updateActiveTab = throttle(() => {const { top: scrollTop, height: scrollHeight } = scrollEl.value.getBoundingClientRect();for (const [index, el] of tabListRefs.value.entries()) {let realEl: any;if (el instanceof HTMLElement) {realEl = el;} else {realEl = el?.$el;}if (realEl) {const { top, height } = realEl.getBoundingClientRect();if (top + height > scrollTop + scrollHeight * 0.66 || top >= scrollTop) {if (activeKey.value === index) {break;} else {// 选中界面上大于2/3的前一项,或者有标题的后一项const leftTabElement = document.getElementById('template-tab');if (leftTabElement) {const divElements = leftTabElement.querySelectorAll('div');divElements.forEach((element: any) => {element.blur(); // 取消之前选中的hover});}activeKey.value = index;break;}}}}
}, 500);watch(() => y.value,() => {if (tabChanging.value) {updateActiveTab();}},
);

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

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

相关文章

手动安装Ubuntu系统中的network-manager包(其它包同理)

自己手闲把系统中的network-manager包给删了&#xff0c;导致的结果就是Ubuntu系统彻底没有网络。结果再装network-manager时&#xff0c;没有网络根本装不了&#xff0c;网上的方法都试了也没用&#xff0c;然后就自己源码装&#xff0c;这篇文章就是记录一下怎么手动下载包然…

Qt初识简单使用Qt

使用C代码实现hello world 之前介绍过用图形化界面的方式创建hello world&#xff0c;这里我们使用C代码的方式再来实现一次hello world。 如上&#xff0c;首先要先包含一个头文件。 在QT这里&#xff0c;每一个类都有一个对应的同名头文件。比如这里我就包含了 <QLabel&…

自定义集成ESXI网卡驱动

需要的软件&#xff1a; ESXi-Customizer-v2.7.2 集成工具&#xff0c;可以将vib网卡驱动加载到镜像中&#xff0c;不用敲命令了 VIB 网卡驱动 根据自己网卡的型号自行下载 ESXi-Customizer-v2.7.2 软件地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1v5aI9T-Tl5…

Golang | Leetcode Golang题解之第559题N叉树的最大深度

题目&#xff1a; 题解&#xff1a; func maxDepth(root *Node) (ans int) {if root nil {return}queue : []*Node{root}for len(queue) > 0 {q : queuequeue nilfor _, node : range q {queue append(queue, node.Children...)}ans}return }

【JAVA基础】JVM双亲委派

JVM双亲委派 双亲委派机制为什么进行双亲委派&#xff1f;为什么要设计这种机制&#xff1f; 双亲委派机制 双亲委派是一个孩子向父亲方向&#xff0c;然后父亲向孩子方向的双亲委派过程总结&#xff1a;自下&#xff08;从 App 开始&#xff09;而上进行检查&#xff0c;自上…

Qt生成coredump文件(支持arm和x86架构)

简介&#xff1a; coredump一般都在执行文件崩溃时自动生成的&#xff0c;用来定位造成程序崩溃的原因。 ubuntu下的设置coredump步骤&#xff08;linux的x86架构&#xff09; 1、正常情况下coredump生成路径需要在root权限下才能设置生效&#xff0c;所以我们需要进入root模式…

探秘Sketch及其替代者:设计软件精选指南

Sketch是一款适用于macOS系统的专业矢量绘图应用软件&#xff0c;由荷兰公司Sketch B.V. 开发&#xff0c;于2010年9月7日首次发布&#xff0c;并在2012年获得苹果设计大奖。以下是对Sketch软件的具体介绍。 1、Sketch软件是什么 功能特点&#xff1a; 矢量编辑功能强大&…

初识网络原理

1.网络互联 网络互联就是将多台计算机连接在一起&#xff0c;完成数据共享。 数据共享本质就是网络数据传输&#xff0c;即计算机之间通过网络来传输数据&#xff0c;也称为网络通信。 根据网络互联的规模不同&#xff0c;可以划分为局域网和广域网。 1.1 局域网 局域网&am…

文章管理系统微信小程序ssm+论文源码调试讲解

第2章 关键技术简介 2.1 微信小程序 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种全新的连接用户与服务的方式&#xff0c;可以快速访问、快速传播&#xff0c;并具有良好的使用体验[12]。 小程序的主要开发语言是JavaScript&#xff…

Python OpenCV孤立点检测

孤立点检测 在Python中使用OpenCV进行孤立点&#xff08;异常点&#xff09;检测&#xff0c;可以通过应用统计分析或者使用OpenCV的findContours和convexHull函数来识别。以下是一个简单的例子&#xff0c;使用OpenCV的findContours和convexHull来识别并绘制孤立点。 孤立点…

leetcode-15-三数之和

题解&#xff1a; 代码&#xff1a; 参考&#xff1a;leetcode-16-最接近的三数之和

PHP中小学优校管理系统小程序源码

&#x1f3eb; 中小学优校管理系统&#xff1a;打造教育新生态&#xff0c;赋能智慧校园 &#x1f3eb; &#x1f3f7;️ 开篇&#xff1a;为什么我们需要中小学优校管理系统&#xff1f; 在教育日新月异的今天&#xff0c;传统的管理模式已难以满足现代学校的需求。面对庞大…

Java poi 模板导出Word 带图片

Java poi 模板导出Word 带图片 重点&#xff01;&#xff01;&#xff01; 官方文档&#xff1a;https://deepoove.com/poi-tl/#_maven 最终效果 模板 其实内容都在官方文档里写的非常明白了 我这里只是抛砖引玉。 Maven依赖 <poi.version>4.1.2</poi.version>…

【JAVA毕业设计】基于Vue和SpringBoot的微服务在线教育系统

博主说明&#xff1a;本文项目编号 T 060 &#xff0c;文末自助获取源码 \color{red}{T060&#xff0c;文末自助获取源码} T060&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…

泷羽sec学习打卡-Linux基础

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于Linux的那些事儿-Base 一、Linux-Base什么时openssl&#xff1f;有哪些加密参数&#xff1f;常用lin…

【6.2】位运算-解重复的DNA序列

一、题目 所有 DNA 都 由 一 系 列 缩 写 为 A &#xff0c; C &#xff0c; G 和 T 的 核 苷 酸 组 成 &#xff0c; 例如&#xff1a;"ACGAAT TCCG"。在研究DNA时&#xff0c;识别DNA中的重复序列有时会对研究非常有 帮助。 编写一个函数来找出所有目标子串&#…

Net.Core Mvc 添加 log 日志

1: 首先在 Nuget 安装插件 2&#xff1a;添加 log 配置 在项目中新创件一个文件夹 ConfigFile 在文件家里面添加 log4net.config log4net.config 里面写入 <?xml version"1.0" encoding"utf-8"?> <configuration><log4net><!--跟…

A030-基于Spring boot的公司资产网站设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

AG32 MCU与CPLD通过AHB总线交互

MCU与CPLD可以通过AHB或APB总线进行数据交互。APB总线通常连接低速设备&#xff0c;如串口&#xff0c;而AHB总线则用于连接高速设备&#xff0c;如RAM等。由于我们需要高速采集大量数据&#xff0c;因此选择使用AHB总线与CPLD进行交互。 地址范围 在地址设计中&#xff0c;C…

【学习笔记】PT协程-未完待续

单线程编程-协程 单线程&#xff0c;所有协程都是共享栈–换句话说&#xff1a;裸机 代码结构 十分精简 lc 有两个版本 文件说明lc-addrlabels.h使用GCC扩展语法实现的协程基础lc-switch.h使用switch语句实现的协程基础lc.h用于选择GCC语法还是switch语句实现pt.h基于lc.h实…