前端仿新浪新聞 tabs 選項卡tabs標(biāo)簽頁，根據(jù)文字多少自適應(yīng) tab項寬度,?閱讀全文下載完整代碼請關(guān)注微信公眾號： 前端組件開發(fā)
效果圖如下:
?文章來源地址http://www.zghlxwxcb.cn/news/detail-477838.html
實現(xiàn)代碼如下：
#### 使用方法
```使用方法
<!-- v-model：選擇序列 tabs：選擇數(shù)組 myColor:下劃線顏色 spaceLeft:tabs間距 height:設(shè)置高度 @change:tabs切換事件 -->
<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>
```文章來源：http://www.zghlxwxcb.cn/news/detail-477838.html
#### HTML代碼部分
```html
<template>
<view class="content">
<view style="margin: 10px;">默認設(shè)置</view>
<ccScrollTabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">設(shè)置下劃線顏色</view>
<ccScrollTabs v-model="tabIndexTwo" myColor="red" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">設(shè)置間距</view>
<ccScrollTabs v-model="tabIndexThree" spaceLeft="20" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="margin: 10px;color: #88888;">設(shè)置行高</view>
<ccScrollTabs v-model="tabIndexfour" myColor="red" height="90" :tabs="tabs" @change="tabChange"></ccScrollTabs>
<view style="height: 300px;"></view>
</view>
</template>
```
#### JS代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
import ccScrollTabs from '../../components/cc-scrollTabs/cc-scrollTabs.vue'
export default {
components: {
ccScrollTabs
},
data() {
return {
tabIndex: 0,
tabs: ['資訊', '體育', '視頻', '直播', '鳳凰衛(wèi)視', '政務(wù)', '美好中國', '財經(jīng)', '娛樂', '時尚', '汽車', '房產(chǎn)'],
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>
```
?
到了這里，關(guān)于前端仿新浪新聞 tabs 選項卡tabs標(biāo)簽頁，根據(jù)文字多少自適應(yīng) tab項寬度的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
