Uni-app开发微信小程序顶部双层tabbar切换页面内容

Uni-app开发微信小程序顶部双层tabbar切换页面内容

页面效果图（仿国家反诈中心APP）

一般的顶部tabbar一层

<swiper class="top_tab">
			<swiper-item :class="{ 'toptab_item_active': index == taballCur }" v-for="(item, index) in tabListAll"
				:key="index" class="toptab_item" @click="clickCtAllTab(index)">
				<view>{{item.title}}</view>
			</swiper-item>
		</swiper>

如果需要两层的话，需要在上一个tabbar的孩子的位置再加一个即可（注意排版）
压面完整的vue代码

<template>
	<view>
		<!-- 顶tab -->
		<swiper class="top_tab">
			<swiper-item :class="{ 'toptab_item_active': index == taballCur }" v-for="(item, index) in tabListAll"
				:key="index" class="toptab_item" @click="clickCtAllTab(index)">
				<view>{{item.title}}</view>
			</swiper-item>
		</swiper>
		<view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
			<view style="background-color: #e2e2e2; width: 100%; height: 1rpx;"></view>
		</view>
		<!-- 内容信息 -->
		<view v-if="taballCur===0">
			<!-- tab部分 -->
			<swiper class="ct_tab">
				<swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
					class="ct_item" @click="clickCtTab(index)">
					<text v-text="item.title"></text>
				</swiper-item>
			</swiper>
			<view style="display: flex;margin-top:20rpx;margin-bottom: 20rpx;">
				<view style="background-color: #e2e2e2; width: 100%; height: 1rpx;"></view>
			</view>
			<view v-if="tabCur===0">
				<view class="recommend">
					<news-list></news-list>
				</view>
			</view>
			<view v-if="tabCur===1">
				<view>浙江</view>
			</view>
			<view v-if="tabCur===2">
				<view>各地动态</view>
			</view>
			<view v-if="tabCur===3">
				<view>小课堂</view>
			</view>
			<view v-if="tabCur===4">
				<view>视频</view>
			</view>
		</view>
		<view v-if="taballCur===1">
			<view>案例</view>
		</view>

	</view>
</template>

<script>
	import newsList from '../../common/component/newsList.vue'
	export default {
		components: { newsList },
		data() {
			return {
				tabCur: 0,
				taballCur: 0,
				tabListAll: [{
					title: '宣传',
				}, {
					title: '案例',
				}],
				// 二级tabbar的标题
				tabList: [{
					title: '推荐',
				}, {
					title: '浙江',
				}, {
					title: '各地动态',
				}, {
					title: '小课堂',
				}, {
					title: '视频',
				}]
			}
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				console.log('tabCur点击了--->' + this.tabCur)
			},
			clickCtAllTab(ctallCur) {
				this.taballCur = ctallCur
				console.log('最顶上的ctallCur点击了--->' + this.taballCur)
			}
		}
	}
</script>

<style lang="scss">
	.top_tab {
		height: 60rpx;
		display: flex;
		align-items: center;
		width: 700upx;
		swiper-item {
			width: 350upx !important;
			text-align: center;
			font-size: 38rpx;
			font-weight: 600;
		}
		.toptab_item {
			flex: 1;
			display: inline-block;
			width: 350upx;
			text {
				padding: 30upx 0;
			}
		}
		.toptab_item_active {
			flex: 1;
			color: rgb(52, 80, 243);
			text {
				border-bottom: 2px solid rgb(52, 80, 243);
			}
		}
	}
	.ct_tab {
		width: 698upx;
		height: 40rpx;
		font-size: 30upx;
		color: rgb(104, 104, 104);
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		margin-left: 20rpx;
		swiper-item {
			width: 140upx !important;
			text-align: center;
		}
		.ct_item {
			flex: 1;
			width: 140upx;
			display: inline-block;
			text {
			}
		}
		.ct_active {
			color: rgb(52, 80, 243);
			text {
				border-bottom: 2px solid rgb(52, 80, 243);
				background-color: aliceblue;
			}
		}
	}
	swiper {
		width: 100%;
	}
	.recommend {
		margin-left: 30rpx;
		margin-right: 50rpx;
	}
</style>