前端仿新浪新闻 tabs 选项卡tabs标签页，根据文字多少自适应 tab项宽度, 阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下:
文章来源地址https://www.toymoban.com/news/detail-477838.html
实现代码如下：
#### 使用方法
```使用方法
<!-- v-model：选择序列 tabs：选择数组 myColor:下划线颜色 spaceLeft:tabs间距 height:设置高度 @change:tabs切换事件 -->
<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>
```文章来源：https://www.toymoban.com/news/detail-477838.html
#### HTML代码部分
```html
<template>
<view class="content">
<view style="margin: 10px;">默认设置</view>
<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">设置下划线颜色</view>
<ccScrollTabs v-model="tabIndexTwo" myColor="red" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">设置间距</view>
<ccScrollTabs v-model="tabIndexThree" spaceLeft="20" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">设置行高</view>
<ccScrollTabs v-model="tabIndexfour" myColor="red" height="90" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="height: 300px;"></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>
```
到了这里，关于前端仿新浪新闻 tabs 选项卡tabs标签页，根据文字多少自适应 tab项宽度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
