SxsnWechat/pages/nonprofit.vue

<template>
	<view class="tab_page" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<up-navbar title="我的公益" bgColor="#FFFFFF">
			<template #left></template>
		</up-navbar>
		<div class="tab adf">
			<div class="tab-pre" :class="{'active':tidx===0}" @tap="changeTab(0)">未开始</div>
			<div class="tab-pre" :class="{'active':tidx===1}" @tap="changeTab(1)">进行中</div>
			<div class="tab-pre" :class="{'active':tidx===2}" @tap="changeTab(2)">已结束</div>
		</div>
		<div class="list">
			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
				<up-list-item v-for="(item, index) in list" :key="index">
					<NonprofitItem></NonprofitItem>
				</up-list-item>
			</up-list>
		</div>
		<CusTabbar :tabbarIndex="1"></CusTabbar>
	</view>
</template>

<script setup name="">
	import CusTabbar from '@/components/CusTabbar/index.vue'
	import NonprofitItem from '@/components/pages/nonprofitItem/index.vue'
	import { ref } from 'vue'
	
	const tidx = ref(0)
	const query = ref({
		page: 1,
		limit: 10,
		status: 0
	})
	const list = ref([1,1,1,1,1,1])
	
	const changeTab = index => {
		tidx.value = index;
	}
</script>

<style scoped lang="scss">
	.tab_page{
		padding: 0;
		.tab{
			height: 110rpx;
			padding: 40rpx 24rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			&-pre{
				width: calc(100% / 3);
				position: relative;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #676775;
				line-height: 30rpx;
				text-align: center;
				&.active{
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					&::after{
						content: '';
						width: 100%;
						height: 6rpx;
						background: #252525;
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
			}
		}
		.list{
			height: calc(100% - 274rpx);
			padding: 0 24rpx 20rpx;
			box-sizing: border-box;
		}
	}
</style>