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.
88 lines
1.5 KiB
88 lines
1.5 KiB
<template> |
|
<view class="tab-nav-box"> |
|
<view |
|
class="tab-list acea-row row-between" |
|
:style="{ color: dColor,fontSize: fontSize + 'rpx' }"> |
|
<view |
|
class="tab-item" |
|
:class="active == index ? 'active' : '' " |
|
v-for="(item,index) in tabList" :key="index" |
|
@click="tabItemClick(index)" |
|
> |
|
{{item.name}} |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default{ |
|
props: { |
|
tabList: { |
|
type: Array, |
|
default: ()=> [] |
|
}, |
|
dColor: { |
|
type: String, |
|
default: '#9F9F9F' |
|
}, |
|
fontSize: { |
|
type: Number, |
|
default: 32 |
|
} |
|
}, |
|
data(){ |
|
return { |
|
active: 0 |
|
} |
|
}, |
|
methods:{ |
|
tabItemClick(i){ |
|
this.active = i |
|
this.$emit('tabItemClick',i) |
|
}, |
|
tabItemClick(i){ |
|
this.active = i |
|
this.$emit('tabItemClick',i) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.tab-nav-box{ |
|
width: 100%; |
|
padding: 8rpx 80rpx; |
|
background: #fff; |
|
border-bottom: 2rpx solid #F5F5F5; |
|
.tab-list{ |
|
width: 100%; |
|
height: 100%; |
|
.tab-item{ |
|
position: relative; |
|
&::after{ |
|
display: block; |
|
content: ''; |
|
width: 48rpx; |
|
height: 4rpx; |
|
border-radius: 2rpx; |
|
background: #06050A; |
|
position: absolute; |
|
bottom: -8rpx; |
|
left: 50%; |
|
opacity: 0; |
|
margin-left: -24rpx; |
|
transform: scaleX(0); |
|
transition: all .2s ease, opacity .15s ease; |
|
} |
|
&.active{ |
|
color: #06050A; |
|
&::after{ |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|