nav點選切換實作
data() {
return {
active: 0,
nav: [{value: 0, txt: '全部'}, {value: 1, txt: '待稽核'}, {value: 2, txt: '已認證'}, {value: 3, txt: '未通過'}]
}
}
<view class="shareOrder-nav" v-if="">
<view class="shareOrder-nav-text" :class="{'active' : active === index}" v-for="(item,index) in nav"
:key="index" @click="changeNav(index)">{{item.txt}}
</view>
</view>
methods: {
changeNav(index) {
console.log(index);
this.active = index;
}
}
//scss
.shareOrder {
&-nav {
display: flex;
text-align: text-align-center;
padding: 0 10px;
border-bottom(#ededed, 1px, solid);
&-text {
flex: 1;
position: relative;
font:14px,
color: #999);
&.active {
color: #9578d2;
&::after {
content: '';
display: block;
transform: translateX(50%);
margin-top: 15px;
width: 25%;
height:3px;
background: #9578d2;
border-radius: 3px;
}
}
}
}
}