【uniapp tabs标签组件】移动端tabs标签组件，点击标签滚动到中间位置，点击标签横向滚动显示完全【复制即用】
创始人
2025-05-31 04:09:33

前言

这个tabs功能是很多移动端项目都要用的
最近我刚好遇到了这个功能
因为我们项目不让用uview等组件。
所以只能用uniapp自带的组件uni-ui
但是问题就是这里没有这种滚动的tabs标签组件用啊。
所以万不得已之下，我cv工程师只好动动小手写一个组件了。
刚好这里也发出来保存一下，以后在用到可以直接复制了

效果演示

在这里插入图片描述

uniapp 手写一个tabs组件，点击标签会滚动到中间

代码

这是组件，创建一个vue文件直接复制放进去
这里核心点一个是用到scroll-view，靠他来滚动
然后组件点击tabs标签的时候会触发方法拿到对应标签的index
利用这个index给标签高亮，以及传给父组件数据
同时把index传给滚动方法内
滚动方法内通过判断屏幕宽度来确定滚动与否
rect就是包含每个标签的左右距离，根据这个距离来控制滚动

使用方法：

看图，主要就是引入组件，然后传入数组，和方法里获取点击的标签
在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：电子采购管理软件开发功能有哪些？

下一篇：Nordic nRF5 mesh蓝牙组网（一）

相关内容

热门资讯

黄瓜胶有什么好处 极速百科网 ... 黄瓜胶的好处有以下几点： 1、美白肌肤：黄瓜胶里面维生素C的含量非常多，能够有助于抑制黑色素的...
包公断案的歇后语,标题建议：《... 包公断案——铁面无私收到你的喜欢啦收到你的喜欢啦标题建议：《包公断案：公正无私，铁面无私的典范》包公...
硫离子的电子式怎么写,硫离子的... 硫离子的电子式为：S2-。硫是一种非金属元素，原子序数为16，在元素周期表中位于第三周期的VIA族。...
摇滚og是什么意思,摇滚OG指... 摇滚OG指的是元老级的摇滚歌手，是对这些歌手的肯定和赞扬。收到你的喜欢啦收到你的喜欢啦摇滚OG指的是...
用队列实现栈和用栈实现队列（C... 目录 一、用队列实现栈 二、 用栈实现队列 一、用队列实现栈 请你仅使用两个队列实现一个后入先出&...
代码随想录刷题-哈希表-两数之... 文章目录两数之和习题暴力解法哈希表 两数之和 本节对应代码随想录中：代码随想录...
凌恩生物明星产品：让你读懂细胞... 叶绿体和线粒体是真核细胞中不可或缺的重要细胞器，是第二套遗传信息系统，与...
密码如何“加盐加密”处理？程序... 目录 前言 一、手写加盐算法 1.1、加密 1.1.1、加密思路 1.1.2、加密简图 1.1.3、...
黑化什么意思网络用语 极速百科... 黑化，词语，也可指性情大变，比如原本某A是个文青，温文尔雅，突然某天某A大开杀戒，残忍无比，这就是所...
带有古和今的成语,古今的对话：... 带有古和今的成语有很多，例如：古为今用、古往今来、古稀之年、古今中外等等。这些成语都包含了古代和现代...
能力强的人有什么特点,标题建议... 能力强的人往往具备以下特点： 1. 学习能力：能力强的人通常能够快速学习新知识和技能，并能够灵...
跑步机怎么操作大图 极速百科网... 1. 启动跑步机：首先，确保跑步机已经插上电源，然后打开跑步机的电源开关。大多数跑步机都有一个启动/...
ELK+Filebeat+Ka... 文章目录ELK+Filebeat+Kafka分布式日志管理平台搭建为什么选择ELK&...
哈希结构的代码实现（开散列、闭... 哈希结构 unordered系列的关联式容器之所以查找效率比较高，是因为其底层使用了哈...
Java Annotation... 注解 注解（Annotation），又称元数据ÿ...
bim装配式工程师证书有用吗,... 首先，我们需要明确一点，那就是BIM装配式工程师证书肯定是有用的。这个证书证明了持有人掌握了BIM技...
什么东西可以深层清洁毛孔 极速... 首先，我们要明白，毛孔的深层清洁不仅仅是指清洁面部皮肤，还包括清洁身体和头发的毛孔。接下来，我将为你...
vip全称 极速百科网 极速百... VIP的英文全称为Very Important Person，中文翻译为重要人物、要员。一般指VIP...
公共交通工具有哪些 极速百科网... 1. 城市公交：这是大家最熟悉的公共交通工具之一，提供在城市内部的运输服务。公交车根据不同的大小和座...
智能火焰与烟雾检测系统（Pyt... 摘要：智能火焰与烟雾检测系统用于智能日常火灾检测报警，利用摄像头画面实时...
【学习笔记】《Writing ... 文章目录14 Energizing Writing 充满活力的写作14.1. ACTIVE VERS...
基于R语言因果关系推断模型实践... 通过数据得到可靠的因果关系一直是科学研究的主要目标之一。对因果关系的研究已经有千年之久；...
手机qq里怎么分组,手机QQ分... 1. 打开QQ应用，进入联系人界面。 2. 找到你想要分组的联系人或群聊。 3. 长按想...
带指的成语有哪些 极速百科网 ... 指日高升、一指蔽目、屈指可数、十指连心、三指佞臣、染指垂涎、戟指怒目、屈指可数。 如需更多含有...
第十八天 Vue-前端工程化总... 目录 Vue-前端工程化 1. 前后端分离开发 1.1 介绍 1.2 Yapi 2. 前端工程化 2...
急用钱公积金怎么提现,公积金提... 1. 了解公积金提现的条件和手续。在您考虑提现之前，请务必了解您所在地区的具体规定和要求。通常，您需...
杯子刻字励志八个字,志存高远，... 杯子刻字励志八个字建议如下： 1. 志存高远，自强不息。 2. 持之以恒，锐意进取。 ...
YOLOV4详解 1. 为什么要学习YOLOV4? 通过学习YOLOV3这个很重要的算法, 可以学习到作者重新设计Da...
提高曝光率：外贸网站如何充分利... 自从我从事外贸行业以来，谷歌优化一直是我关注的重点。 作为一个外贸从业者，...
Vue3 学习总结补充（一） 文章目录1、Vue3中为什么修改变量的值后，视图不更新？2、使用 ref...