<template>
<view class="tab">
<scroll-view scroll-x="true" class="tab-scroll">
<view class="tab-scroll-box">
<view class="tab-scroll-box-item" :class="{active:activeIndex===index}" @click="clickTab(item,index)"
v-for="(item,index) in list" :key="index">
{{item.name}}
</view>
</view>
</scroll-view>
<view class="tab-icon">
<uni-icons type="gear" size="26" color="#666"></uni-icons>
</view>
</view>
</template>
<script>
export default {
name: "tab",
props: {
list: {
type: Array,
default () {
return []
}
}
},
created() {
console.log(this.list);
},
data() {
return {
activeIndex: 0
};
},
methods: {
clickTab(item, index) {
this.activeIndex = index
this.$emit('tab', {
item,
index
})
}
}
}
</script>
<style lang="scss" scoped>
.tab {
display: flex;
background-color: #FFFFFF;
border-bottom: 1px solid #f5f5f5;
width: 100%;
.tab-scroll {
// flex: 1;
overflow: hidden;
.tab-scroll-box {
display: flex;
// 垂直居中
align-items: center;
// flex-wrap: nowrap;
height: 45px;
.tab-scroll-box-item {
// 控制元素的缩小比例,
flex-shrink: 0;
font-size: 16px;
color: #333333;
padding: 0 10px;
&.active {
color: $mk-base-color;
}
}
}
}
.tab-icon {
position: relative;
display: flex;
// 水平居中
justify-content: center;
// 垂直居中
align-items: center;
width: 45px;
// 伪类
&::after {
content: '';
position: absolute;
top: 12px;
bottom: 12px;
left: 0;
width: 1px;
background-color: #ddd;
}
}
}
</style>
使用
<!-- 自定义选项卡组件 -->
<tab :list='labelList' @tab='tab'></tab>
onLoad() {
this.getLabel()
},
methods: {
getLabel() {
this.$api.getLabel().then(res => {
this.labelList = res.data
})
},
tab({item,index}) {
console.log(item, index);
}
}