uniProject/pages/chanpinXuanze/index.vue

<template>
	<!-- 返回区域 -->
		<view class="icon-title-navBar-box">
			<!-- <view @click="handleBack" class="nav-bar-icon"></view> -->
			<text class="nav-bar-title">选课</text>
		</view>
		<view style="position: relative;background-color: #fff;z-index: 1;">
			<!-- 头部区域 -->
			<view >
				<view v-for="item in data.list" :key="item.value" :class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
			</view>
			<!-- 英语列表 -->
			<view class="list yingyu" v-if="data.chanpinActiveSelect == 1">
				
			</view>
			<!-- 数学列表 -->
			<shuxueListVue class="list shuxue" v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
			<!-- 语文列表 -->
			<view class="list yuwen" v-if="data.chanpinActiveSelect == 3">
				
			</view>
		</view>
		
		<CustomTabBar :currentTabNumber="0"></CustomTabBar>
</template>

<script setup>
	import {reactive} from "vue";
	import shuxueListVue from "./components/shuxueList.vue";
	import {onLoad} from "@dcloudio/uni-app"
	import * as shuxueHttp from "@/api/chanpinShuxue.js"
	import CustomTabBar from "@/components/custom-tabbar/custom-tabbar.vue";
	
	const data = reactive({
		list: [
			{
				name: '英语',
				value: 1
			},
			{
				name: '数学',
				value: 2
			},
			{
				name: '语文',
				value: 3
			},
		],
		chanpinActiveSelect: 2,
		
		shuxueList: [],
	})
	
	function handleBack() {}
	
	function getShuxueList() {
		shuxueHttp.getShuxueChanpinList().then(res => {
			data.shuxueList = res.data;
		})
	}
	
	function handleSelectChanpin(item) {
		data.chanpinActiveSelect = item.value
	}
	
	onLoad(() => {
		getShuxueList()
	})
</script>

<style scoped lang="scss">
.active {
	color: red
}
</style>