前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度, 下载完整代码请访问https://ext.dcloud.net.cn/plugin?id=13003

 

效果图如下:

 

#### 使用方法

```使用方法

swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表

swiperTabIdx: 0,

swiperColor: '#161616', //导航栏字体未选中前颜色

swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色

curSwiperWidth: '26%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）

curSwiperHeight: 96, //当前导航的高度度 rpx px

curSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）

curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色

curSwiperLineActiveWidth: '60%', //当前选中的导航栏线条的宽度 upx rpx px

curSwiperLineActiveHeight: '2px', //当前选中的导航栏线条的高度度 upx rpx px

:curSwiperWidth='curSwiperWidth' :curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor'

:swiperCurrentColor='swiperCurrentColor' :curSwiperLineShow="curSwiperLineShow"

:curSwiperLineActiveWidth="curSwiperLineActiveWidth" :curSwiperLineActiveHeight="curSwiperLineActiveHeight"

:curSwiperLineActiveBg="curSwiperLineActiveBg"

@change="CurrentTab">

```

#### HTML代码部分

```html

```

#### JS代码 （引入组件 填充数据）

```javascript

```

#### CSS

```css

```