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.
79 lines
1.5 KiB
79 lines
1.5 KiB
<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>
|
|
|