<view>
<view class="nav">
<view class="flex">
<view class="navTitle">
<view :class="{'active':isActive==1}" @click="checked(1)">
待审核
</view>
</view>
<view class="navTitle">
<view :class="{'active':isActive==2}" @click="checked(2)">
审核中
</view>
</view>
<view class="navTitle">
<view :class="{'active':isActive==3}" @click="checked(3)">
已审核
</view>
</view>
</view>
</view>
<view class="nav_item" v-if="isActive==1">
11111
</view>
<view class="nav_item" v-if="isActive==2">
22222
</view>
<view class="nav_item" v-if="isActive==3">
33333
</view>
</view>
<script>
export default {
data() {
return {
isActive: 1
}
},
methods: {
checked(type) {
this.isActive = type
},
}
}
</script>
<style>
.flex{
display: flex;
}
.navTitle {
height: 90rpx;
line-height: 90rpx;
width: 100%;
text-align: center;
font-size: 32rpx;
font-family: "PingFang";
color: rgb(102, 102, 102);
}
.active {
position: relative;
color: #1F75FE;
}
.active::after {
content: "";
position: absolute;
width: 100rpx;
height: 4rpx;
background-color: #1F75FE;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
uniapp中自定义顶部导航切换内容
最新推荐文章于 2024-07-19 10:35:16 发布