簡單實現導航條,篩選切換的效果
阿新 • • 發佈:2020-12-11
<template>
<view>
<view class="tab">
<view class="tabitem" :class="{ current: filterIndex === 1 }" @click="tab(1)">{{num}}</view>
<view class="tabitem" :class="{ current: filterIndex === 2 }" @click="tab(2)">{{num}}</view>
<view class="tabitem" :class="{ current: filterIndex === 3 }" @click="tab(3)">{{num}}</view>
</view>
</view>
</template>
<script>
export default {
name:'tabar',
data() {
return {
num: 'Hello',
filterIndex:''
}
},
onLoad() {
},
methods: {
tab(index){
// if(this.filterIndex === index && index !== 3){
// return
// }
this.filterIndex = index;
console.log(this.filterIndex)
}
}
}
</script>
<style lang="less" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.tab {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
}
.tabitem {
text-align: center;
width: 33.3%;
height: 50px;
font-size: 36rpx;
color: #8f8f94;
&.current{ //表示父標籤自身樣式
color: #ed7340;
border-bottom: 2px solid #ed7340;
}
}
</style>
實現效果