uniProject/pages/chanpinZiliao/index.vue

<template>
	<view class="ezy-ziliao-page">
		<view class="icon-title-navBar-box">
			<text class="nav-bar-title">资料</text>
		</view>
		<view class="ezy-page-body">
			<!-- 科目标签切换 -->
			<view class="ezy-xueke-tab-box">
				<ezyActiveVue class="tab-item ezy-btn-active" v-for="item in data.list" :key="item.value" 
					:class="{active: item.key == data.chanpinActiveSelect}" @aclick="handleSelectChanpin(item)">
					{{item.label}}</ezyActiveVue>
			</view>
			
			<!-- 资源卡片列表 -->
			
			<!-- 数学 -->
			<ShuXueList
			  v-if="data.chanpinActiveSelect === 'shuxue'"
			  :list="data.shuxue"
			  @select="goDetail"
			/>
			
			<!-- 英语 -->
			<YingYuList
			  v-else-if="data.chanpinActiveSelect === 'yingyu'"
			  :list="data.yingyu"
			  @select="goDetail"
			/>
			
			<!-- 语文 -->
			<YuWenList
			  v-else-if="data.chanpinActiveSelect === 'yuwen'"
			  :list="data.yuwen"
			  @select="goDetail"
			/>
			
		</view>
	</view>
	<custom-tab-bar :show="true" :current-index="currentTabIndex" />
</template>

<script setup>
import {reactive, ref} from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app"
import CustomTabBar from "@/components/custom-tabbar/index.vue";
import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
import shuxueList  from "./shuxue/sxList.vue"
import yingyuList  from "./yingyu/yyList.vue"
import yuwenList  from "./yuwen/ywList.vue"
let currentTabIndex = ref(2);
const data = reactive({
	list:[
	  { key: 'shuxue', label: '数学' },
	  { key: 'yingyu', label: '英语' },
	  { key: 'yuwen', label: '语文' }
	],
	chanpinActiveSelect: 'shuxue',
	shuxue: {},
	yingyu: {},
	yuwen: {}
})

// tab click
function handleSelectChanpin(item) {
	data.chanpinActiveSelect = item.key
}
onLoad(() => {
	// 隐藏默认系统导航栏显示自定义导航栏
	uni.hideTabBar()
})
</script>

<style>
</style>