You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.5 KiB
80 lines
1.5 KiB
1 year ago
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<scroll-view class="scroll" :scroll-into-view="'scroll_view_id_'+(tabIndex-1)" scroll-x="true"
|
||
|
|
show-scrollbar="false">
|
||
|
|
|
||
|
|
<div class="scroll_view" :id="'scroll_view_id_'+index" @click="tabClick(index)"
|
||
|
|
v-for="(item,index) in tabList" :key="index">
|
||
|
|
<text class="tabText" :style="{
|
||
|
|
color:tabIndex===index?activeColor:noActiveColor,
|
||
|
|
fontWeight:tabIndex===index?'bold':'normal',}">{{item.name}}</text>
|
||
|
|
<view class="active_line"
|
||
|
|
:style="tabIndex===index?'background-color:'+activeColor:'background-color:#ffffff;'"></view>
|
||
|
|
</div>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
activeColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#1596FE'
|
||
|
|
},
|
||
|
|
noActiveColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#333333'
|
||
|
|
},
|
||
|
|
tabList: {
|
||
|
|
type: Array,
|
||
|
|
default: ()=>{
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tabIndex: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabClick(index) {
|
||
|
|
if (this.tabIndex === index) return;
|
||
|
|
this.$emit("change", {
|
||
|
|
detail: {
|
||
|
|
current: index
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" >
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.scroll {
|
||
|
|
background-color: #efefef;
|
||
|
|
white-space: nowrap;
|
||
|
|
position: relative;
|
||
|
|
line-height: 70rpx;
|
||
|
|
.scroll_view {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 10rpx 15rpx;
|
||
|
|
.tabText{
|
||
|
|
line-height: 50rpx;
|
||
|
|
font-size: 35rpx;
|
||
|
|
}
|
||
|
|
.active_line{
|
||
|
|
width: 100%;
|
||
|
|
height: 8rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|