前端仿新浪新闻 tabs 选项卡tabs标签页，根据文字多少自适应 tab项宽度

Posted 2023-06-10 ccVue

前端仿新浪新闻 tabs 选项卡tabs标签页，根据文字多少自适应 tab项宽度, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12876

效果图如下:

 

 

实现代码如下：

#### 使用方法

```使用方法

<!-- v-model：选择序列 tabs：选择数组 myColor:下划线颜色 spaceLeft:tabs间距 height:设置高度 @change:tabs切换事件 -->

<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>

```

#### HTML代码部分

```html

<template>

<view class="content">

<view >默认设置</view>

<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>

<view >设置下划线颜色</view>

<ccScrollTabs v-model="tabIndexTwo" myColor="red" :tabs="tabs" @change="tabChange"></ccScrollTabs>

<view >设置间距</view>

<ccScrollTabs v-model="tabIndexThree" spaceLeft="20" :tabs="tabs" @change="tabChange"></ccScrollTabs>

<view >设置行高</view>

<ccScrollTabs v-model="tabIndexfour" myColor="red" :tabs="tabs" @change="tabChange"></ccScrollTabs>

<view ></view>

</view>

</template>

```

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

```javascript

<script>

import ccScrollTabs from \'../../components/cc-scrollTabs/cc-scrollTabs.vue\'

export default

components:

ccScrollTabs

,

data()

return

tabIndex: 0,

tabs: [\'资讯\', \'体育\', \'视频\', \'直播\', \'凤凰卫视\', \'政务\', \'美好中国\', \'财经\', \'娱乐\', \'时尚\', \'汽车\', \'房产\'],

tabIndexTwo: 0,

tabIndexThree: 0,

tabIndexfour: 0

,

methods:

tabChange(e)

console.log("切换tag = " + JSON.stringify(e));

</script>

```

#### CSS

```css

<style>

.content

display: flex;

flex-direction: column;

.logo

height: 200rpx;

width: 200rpx;

margin-top: 200rpx;

margin-left: auto;

margin-right: auto;

margin-bottom: 50rpx;

.text-area

display: flex;

justify-content: center;

.title

font-size: 36rpx;

color: #8f8f94;

</style>

```

 

VUE仿造element-ui el-tabs标签页选项卡样式

参考技术A 因为某个bug 以为 是 el-tabs 组件的问题，所以想直接仿造一个，结果发现 是其他问题，想想下次哪天会用到 就奉上这段样式

这是用VUE写的。看得懂的 用 JQ 写其实逻辑都一样 没区别！

HTML：

<div class="tabsMain">

                    <ul class="tabsList">

                        <li :class="activeName==item.code?'active':''" v-for="(item,index) of tabList" :key="index" @click="handleClick(item,index)">item.name</li>

                    </ul>

                    <div v-if="activeName == 'tab-1'"></div> //本来想直接用 index 判断的 结果还是直接 仿造el-tabs的方式做吧

                    <div v-if="activeName == 'tab-2'"></div>

                    <div v-if="activeName == 'tab-3'"></div>

</div>

CSS：

.tabsMain

    border: 1px solid #dcdfe6;

    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);

    margin: 0;



.tabsMain > div

    padding: 10px;



.tabsList

    width: 100%;

    background: #f5f7fa;

    overflow: hidden;



.tabsList li

    float: left;

    padding: 0 20px;

    height: 40px;

    box-sizing: border-box;

    line-height: 40px;

    list-style: none;

    font-size: 14px;

    font-weight: 500;

    color: #303133;

    transition: all .3s cubic-bezier(.645,.045,.355,1);

    border: 1px solid transparent;

    margin-bottom: -1px;

    cursor: pointer;



.tabsList li.active

    color: #409eff;

    background-color: #fff;

    border-right-color: #dcdfe6;

    border-left-color: #dcdfe6;

    white-space: nowrap;

    position: relative;

    transition: transform .3s;

    z-index: 2;



.tabsList li:first-child

    margin-left: -1px;



.tabsList li:last-child

    margin-right: -1px;

 

data()

return:

activeName:'tab-1',

tabList:[

     code:'tab-1',name:'标签-1',

     code:'tab- 2,name:'标签-2',

     code:'tab-3,name:'标签-3'

]



,

methods:

handleClick(item)

    this.activeName = item.code





最后结果：图