# 封装话题介绍组件
# 公共列表组件复用
重新修改tab组件, 支持多种复用, 通过传参来解决不同地方拥有不同样式的问题
swiper-taab-header.vue
<template>
<view>
<!-- 顶部选项卡 -->
<view class="uni-tab-bar">
<scroll-view scroll-x class="uni-swiper-tab" :style="scrollStyle"> ⭐⭐⭐
<block v-for="(tab, index) in tabBars" :key="tab.id">
<view class="swiper-tab-list" :class="{'active':tabIndex===index}" @tap="tabtap(index)" :style="scrollItemStyle"> ⭐⭐⭐
{{tab.name}}
<view class="swiper-tab-line">
</view>
</view>
</block>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
props: {
tabBars: Array,
tabIndex: Number,
scrollStyle: { ⭐⭐⭐
type: String,
default: ""
},
scrollItemStyle: { ⭐⭐⭐
type: String,
default: ""
}
},
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
然后引入使用
<!-- tab切换 -->
<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;" scrollItemStyle="width:50%;"></swiperTabHead> ⭐⭐⭐
1
2
2