<template>
<view class="complaintList">
<!-- 选项卡标题 -->
<view class="handleTitle">
<view v-for="(item,index) in handleTitle" :key="index" @click="choiceTit(index)">
<view class="titletext">{{item}}</view>
<view :class="titleIndex == index ? 'activeTit' : 'titleline'"></view>
</view>
</view>
<!-- 订单列表 -->
<view class="orderList">
<view v-for="(item,index) in content" :key="index">
<view v-show="titleIndex == index">
{{item}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
handleTitle:['未处理','已处理'],
titleIndex:0,
content:["我是未处理页面","我是已处理页面"]
}
},
onLoad() {
},
mounted() {
},
methods: {
choiceTit(index){
this.titleIndex = index
}
},
}
</script>
<style>
page{
width: 100%;
background: #F1F0F5;
}
.complaintList{
padding:24upx;
font-family: Microsoft YaHei;
}
.handleTitle{
height: 73upx;
background: #FFFFFF;
box-shadow: 0upx 3upx 3upx 0upx rgba(0, 0, 0, 0.1);
border-radius: 20upx;
display: flex;
justify-content: space-evenly;
align-items:flex-end;
}
.handleTitle>view{
display: flex;
flex-direction: column;
align-items: center;
}
.titletext{
font-size: 28upx;
font-weight: bold;
color: #000000;
padding-bottom: 10upx;
}
.titleline{
width: 51upx;
height: 11upx;
background: #FFFFFF;
border-radius: 6upx;
}
.activeTit{
width: 51upx;
height: 11upx;
border-radius: 6upx;
background: #FFCD34;
}
.orderList{
width: 100%;
height: 100upx;
border-radius: 20upx;
background: #FFFFFF;
margin-top: 20upx;
}
</style>
如果选项卡的每一个页面都不一样,选择以下方式的代码
<template>
<view class="complaintList">
<!-- 选项卡标题 -->
<view class="handleTitle">
<view v-for="(item,index) in handleTitle" :key="index" @click="choiceTit(index)">
<view class="titletext">{{item}}</view>
<view :class="titleIndex == index ? 'activeTit' : 'titleline'"></view>
</view>
</view>
<!-- 订单列表 -->
<view class="orderList">
<view v-show="titleIndex == 0">
我是第一个页面
</view>
<view v-show="titleIndex == 1">
我是第二个页面
</view>
</view>
</view>
</template>