给每一个nav_title加一个click点击事件，并传一个具体形参；（当然跟着移动的下划线是伪元素写的）在methods里this.isActive = 形参,然后在 :class="{'active':isActive==1}"条件显示；在nav_item，做一个v-if="isActive==1"
<template>
<view class="warehousingToBeCon">
<view class="nav">
<view class="flex_between">
<view class="nav_title">
<view :class="{'active':isActive==1}" @click="chenked(1)">
待确认
</view>
</view>
<view class="nav_title">
<view :class="{'active':isActive==2}" @click="chenked(2)">
待支付
</view>
</view>
<view class="nav_title">
<view :class="{'active':isActive==3}" @click="chenked(3)">
已完成
</view>
</view>
</view>
</view>
<view class="nav_item" v-if="isActive==1">
111
</view>
<view class="nav_item" v-if="isActive==2">
222
</view>
<view class="nav_item" v-if="isActive==3">
333
</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive: 1
}
},
methods: {
chenked(type) {
this.isActive = type
},
}
}
</script>
<style lang="scss" scoped>
.warehousingToBeCon {
width: 100%;
background-color: #f2f2f2;
.nav {
border-top: 1rpx solid #f2f2f2;
background-color: #fff;
.flex_between {
display: flex;
.nav_title {
height: 88rpx;
line-height: 88rpx;
width: 100%;
text-align: center;
font-size: 32rpx;
font-family: "PingFang";
color: rgb(102, 102, 102);
}
}
}
}
.active {
position: relative;
color: #31d378;
}
.active::after {
content: "";
position: absolute;
width: 100rpx;
height: 4rpx;
background-color: #31d378;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
Processed:
0.010, SQL:
9
