代碼在最后面，先分析下步驟：
效果：
結構：
數據：
方法：
選中樣式：
相關代碼：
<!-- 內容 -->
<view class="shopbox0">
<!-- 四個導航 -->
<view class="good_nav">
<view class="good_nav_son"
v-for="(item,index) in list"
:key="index"
:class=" [active===index?'addnav':'']"
@click="cutNav(index,item.navid)"
>{{item.navname}}</view>
<!-- <view class="good_nav_son">商品詳情</view>
<view class="good_nav_son">售后保障</view>
<view class="good_nav_son">評價
<view class="addorange">12345</view>
</view> -->
</view>
<!-- 導航對應的四個頁面 -->
<!-- 1、基本信息 -->
<view class="bigbox" v-if="navMain == 0">基本信息</view>
<!-- 2、商品詳情 -->
<view class="bigbox" v-if="navMain == 1">商品詳情</view>
<!-- 3、售后保障 -->
<view class="bigbox" v-if="navMain == 2">售后保障</view>
<!-- 4、評價 -->
<view class="bigbox" v-if="navMain == 3">評價</view>
<!-- 底部購買按鈕 -->
<view></view>
</view>
<script>
export default {
data() {
return {
active: 0,
navMain: 0, // 用來判斷顯示哪個內容結構
secondDate: [],
list: [
{
value: 1,
navname: '基本信息',
navid: 0,
store: []
},
{
value: 2,
navname: '商品詳情',
navid: 1,
store: []
},
{
value: 3,
navname: '售后保障',
navid: 2,
store: []
},
{
value: 4,
navname: '評價',
navid: 3,
store: []
},
],
}
},
methods: {
// 導航欄切換：
cutNav(index,id){
this.active = index
this.navMain = id
const res = this.list[id].store
this.secondDate = res
},
}
}
</script>
<style>
.shopbox0 {
width: 100%;
display: flex;
flex-direction: column;
}
.good_nav {
width: 100%;
display: flex;
flex-direction: row;
border-bottom: 2rpx solid #eee;
background-color: #fff;
}
.good_nav_son {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
justify-content: center;
height: 62rpx;
font-size: 30rpx;
color: #858585;
position: relative;
}
.good_nav_son::before {
position: absolute;
content: '|';
top: 8rpx;
color: #eee;
right: 0;
}
.good_nav_son:last-child::before {
position: absolute;
content: '|';
top: 8rpx;
color: #fff;
right: 0;
}
.addorange {
color: #ffa200;
}
.addnav {
border-bottom: 4rpx solid #48c680;
color: #31b26a;
}
</style>