前端仿新浪新聞 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 >
<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>
```
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554868.html
標籤：其他
上一篇：前端vue實作頁面加水印文字 單個頁面所有頁面加水印 水印顏色
下一篇：返回列表