开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天 # 前言前段时间我在写个人项目的时候需要一个组件，就是在移动端非常常见的功能----可滑动tabs栏，但是我找了一下Vue3的组件库，主要是我常用的京东NutUI 和有赞Vant 都没有类似组件，但是又非常想实现那样的效果，在这个万般无奈的背景下，开始了自己的挖坑之路。 ## 预览最终情况 ![1_main.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5c9759a26c42c69e82e0d1e8728793~tplv-k3u1fbpfcp-watermark.image?) # 开始构思首先，要确定的是，tabs组件有上下两部分一个是上面的tab标签，另一个就是每个标签所对应的内容，在这个大前提下，我们先做最常见的也是组件库里有的上面的tabs标签，之后再来实现下面包含着的每个tabs的内容。 # 开始封装 ## 传入的props 后面要用到提前告诉大家都是字面意思 ```scss /**传入的props*/ const props =defineProps({ /** * tabs显示文字的数组 *@typeArray */ tabList: { type:Array, required: true }, dataList: { type:Array, default: [] }, width: { type: String, default: "90vw" }, tabWidth: { type: String, default: "60px" } }) ``` ## 封装头部Tabs 思路：总体构思利用原生CSS中有的属性`overflow-x:scroll`即超过容器时滚动，以此来实现能够左右滑动 ![2_tab.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dfa2b8eed864c38af969b56488c8409~tplv-k3u1fbpfcp-watermark.image?) ### Tabs样式注意点：需要包三层，最外层设置该属性，最大宽度即为最外层宽或者外层的外层。 `scrollbar-width: none` 取消滚动条其他属性可有可无大家可以自己去测试查阅代码如下： ```scss //scss .SlidingTab-header { font-size: medium; color: $grayColor; margin: 10px; overflow: scroll; &::-webkit-scrollbar { display: none; /* Chrome Safari */ } .SlidingTab-header-item { /*解决ios上滑动不流畅*/ -webkit-overflow-scrolling: touch; white-space: nowrap; /* 合并空白和回车 */ flex: none; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ text-align: center; margin: 0 auto; .tab-item { display: inline-block; text-align: center; width: v-bind(tabWidth); margin: 10px 10px 5px 10px; cursor: pointer; } } } ``` ### 可移动的小红条的样式一个`active`一般用来表示 `transition: left .5s;` 表示小红条变换移动时间为0.5秒 `transition-delay: .25s;` 表示文字颜色转换延迟时间上两条属性是为了使变换流程，符合美学！ ```scss //scss 小红条样式如下 .active-line { position: relative; width: v-bind(lineWidth); height: 0.3rem; margin-left: v-bind(lineMarginWidth);//tab-item's margin 10px + tab-item's width * 10% border-radius: 1.5rem; border: 1px solid $theme-red; background-color: $theme-red; transition: left .5s; } .active { color: $theme-red; font-weight: bolder; transition-delay: .25s; } ``` ### Tab部的HTML ```html

``` ### Tab部的JavaScript 真的很简单就这样 ```js // setup语法 ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb35b391c9474ecca6dac5707b45d164~tplv-k3u1fbpfcp-watermark.image?)