tra-app/src/pages/learningTasks/index.vue

<template>
	<view class="max_page detail-main">
		<nav-bar :is_seat="false"></nav-bar>
		<view class="fixed_search_div">
			<view class="back_div" @click="common.navigateBack()">
				<view class="back-icon"></view>
			</view>
			<view class="title font_pf">学习任务</view>
		</view>
		<view class="fixed_search_input_div">
			<search-input placeholder="请输入任务名" @search="search"></search-input>
		</view>
		<view class="detail-body">
			<view class="body-tab">
				<uv-tabs
					class="font_pf my_tabs"
					:current="tabAct"
					:list="tabList"
					@change="tabChange"
					:scrollable="false"
					line-color="#0066FF"
					:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
					:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
					:lineColor="`url(${LineBg}) 10% 10%`"
				></uv-tabs>
			</view>
			<view class="uni-margin-wrap no-overflow">
				<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
					<swiper-item>
						<listItem :ref="(el) => (listItemRefs[0] = el)" state="01"></listItem>
					</swiper-item>
					<swiper-item>
						<listItem :ref="(el) => (listItemRefs[1] = el)" state="02"></listItem>
					</swiper-item>
					<swiper-item>
						<listItem :ref="(el) => (listItemRefs[2] = el)" state="03"></listItem>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { LineBg } from '@/enum.js';
	import listItem from './components/list-item.vue';
	// 我的收藏
	import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
	import common from '@/common/common.js';
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	// 静态样式配置
	const fixedCustomStyles = {
		backgroundColor: '#F1F5FA',
		paddingLeft: '40rpx',
		paddingTop: '5px',
		paddingBottom: '5px',
		border: 'none'
	};
	const suffixIconStyle = {
		color: '#2c8ef2',
		fontSize: '28px'
	};
	const listItemRefs = ref([]);
	const taskRef = ref(null);
	const tabAct = ref(0);
	const tabList = ref([
		{
			name: '全 部'
		},
		{
			name: '已完成'
		},
		{
			name: '未完成'
		}
	]);

	const tabChange = (item) => {
		tabAct.value = item.index;
	};
	const swiperChange = (item) => {
		tabAct.value = item.detail.current;
	};
	const search = (value) => {
		listItemRefs.value[tabAct.value]?.search(value);
	};
	
	onMounted(() => {
		watch(
			tabAct,
			(newValue, oldValue) => {
				typeof listItemRefs.value[newValue]?.getData === 'function' &&
					listItemRefs.value[newValue]?.getData('first');
			},
			{
				immediate: true
			}
		); // 这里的immediate会在onMounted之后执行
	});
</script>

<style lang="scss" scoped>
	$bg-margin-left: 50rpx;

	.my_tabs {
		// 解决这个圆角的图片，开穿透
		:deep(.uv-tabs__wrapper__nav__line) {
			height: 26rpx !important;
			left: 60rpx;
			background-size: 28rpx !important;
			background-repeat: no-repeat !important;
		}
	}

	.swiper {
		/*
		状态栏 var(--status-bar-height)
		标题高度88rpx
		搜索栏高度80rpx
		tab切换栏高度88rpx
		下方滑动区域上下边距各10共20rpx
		**/

		height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx);
	}

	.swiper-item {
		display: block;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
	}

	.detail-body {
		background: #ffffff;
		border-radius: 15rpx;
		z-index: 101;
		overflow: hidden;

		.body-tab {
			height: 88rpx;
		}
	}

	.detail-main {
		background-color: #f6f8ff;
		overflow: hidden;
	}

	.title {
		color: #000000;
		font-size: 34rpx;
		height: 34rpx;
		font-weight: 600;
		line-height: 34rpx;
	}
	.fixed_search_input_div {
		width: 100%;
		height: 80rpx;
		padding: 0 22rpx;
		// background-color: red;
		background-color: #fff;
		:deep(.uv-input.uv-input--radius) {
			border-radius: 16rpx !important;
		}
	}
	.fixed_search_div {
		padding: calc(20rpx + var(--status-bar-height)) 15rpx 34rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		// background-color: red;
		// height: 180rpx;
		position: relative;

		.back_div {
			position: absolute;
			left: 20rpx;
			top: var(--status-bar-height);
			padding: 10rpx;

			.back-icon {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				cursor: pointer;
				display: flex;
				align-items: center;
			}

			.back-icon::before,
			.back-icon::after {
				content: '';
				position: absolute;
				transition: all 0.3s ease;
			}

			.back-icon::after {
				top: 25%;
				left: 25%;
				width: 40%;
				height: 40%;
				border-top: 4rpx solid #000000;
				border-left: 4rpx solid #000000;
				transform: rotate(-45deg);
			}
		}
	}
</style>