MatchTeamList 比赛队伍列表

# MatchTeamList 比赛队伍列表

用于展示比赛队伍列表的组件，支持滚动加载更多数据。组件基于 press-ui 的 press-list 实现，内部循环使用 PressMatchTeamItem 组件展示每个队伍的详细信息。

# 引入

import PressMatchTeamList from 'press-next/press-match-team-list/press-match-team-list';

# 代码演示

# 基础用法

<template>
  <PressMatchTeamList
    :list="teamList"
    :loading="loading"
    :finished="finished"
    @load-more="loadMore"
    @apply="handleApply"
  />
</template>

<script setup>
import { ref } from 'vue';

const teamList = ref([]);
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(0);
const pageSize = 5;

const loadMore = () => {
  if (loading.value || finished.value) return;
  
  loading.value = true;
  
  // 模拟异步加载数据
  setTimeout(() => {
    const newData = generateTeamData(currentPage.value, pageSize);
    
    if (newData.length > 0) {
      teamList.value = [...teamList.value, ...newData];
      currentPage.value += 1;
    } else {
      finished.value = true;
    }
    
    loading.value = false;
  }, 1000);
};

const handleApply = (team, index) => {
  console.log('申请加入队伍:', team, index);
};
</script>

# 滚动加载更多

组件内置了滚动加载更多功能，当用户滚动到底部时会自动触发 load-more 事件。

<PressMatchTeamList
  :list="teamList"
  :loading="loading"
  :finished="finished"
  :finish-text="'已加载全部队伍'"
  @load-more="loadMore"
/>

# 自定义空状态

<PressMatchTeamList
  :list="[]"
  :empty-text="'暂无队伍信息'"
  @load-more="loadMore"
/>

# 完整示例

<template>
  <div class="demo-wrap">
    <PressMatchTeamList
      :list="teamList"
      :loading="loading"
      :finished="finished"
      :empty-text="'暂无队伍数据'"
      :finish-text="'已加载全部队伍'"
      @load-more="onLoadMore"
      @apply="handleApply"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getMockData } from './demo-data/';

const mockData = getMockData();
const teamList = ref([]);
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1);
const pageSize = 5;

// 初始化数据
const initData = () => {
  teamList.value = [...mockData.initialTeamList];
  currentPage.value = 1;
  finished.value = false;
};

// 加载更多数据
const onLoadMore = () => {
  if (finished.value) return;

  loading.value = true;

  setTimeout(() => {
    const newData = mockData.generateMoreTeamData(pageSize);
    
    if (newData.length > 0) {
      teamList.value = [...teamList.value, ...newData];
      currentPage.value += 1;
    }

    if (newData.length < pageSize) {
      finished.value = true;
    }

    loading.value = false;
  }, 1000);
};

const handleApply = (team, index) => {
  console.log('申请加入队伍:', team, '索引:', index);
  uni.showToast({
    title: `申请加入${team.name}`,
    icon: 'success',
  });
};

// 初始化
initData();
</script>

# API

# Props

参数	说明	类型	默认值
list	队伍列表数据	`Array`	`[]`
loading	是否正在加载	`boolean`	`false`
finished	是否已加载完成	`boolean`	`false`
empty-text	空状态提示文字	`string`	`'暂无数据'`
finish-text	加载完成提示文字	`string`	`'没有更多了'`
custom-class	自定义样式类名	`string`	`''`
custom-style	自定义样式	`string \\| object`	`''`

# Events

事件名	说明	回调参数
load-more	滚动到底部时触发	-
apply	点击申请按钮时触发	`(team: object, index: number)`

# 队伍数据结构

interface TeamInfo {
  id: string | number;           // 队伍ID
  name: string;                  // 队伍名称
  avatar?: string;               // 队伍头像
  memberCount: number;           // 当前成员数
  maxMembers: number;            // 最大成员数
  tags?: Array<{                 // 标签列表
    text: string;
    type: 'primary' | 'success' | 'warning' | 'danger';
  }>;
  description?: string;          // 队伍描述
  requirements?: string;         // 入队要求
  isApplied?: boolean;          // 是否已申请
}

# 注意事项

数据加载: 组件本身不处理数据获取逻辑，需要通过 load-more 事件在父组件中实现数据加载
状态管理: loading 和 finished 状态需要在父组件中正确管理，确保用户体验
性能优化: 建议对大量数据进行分页加载，避免一次性渲染过多内容
响应式: 组件已适配移动端，在不同屏幕尺寸下都有良好的显示效果

# 常见问题

# 如何实现下拉刷新？

可以结合 press-ui 的下拉刷新组件使用：

<press-pull-refresh @refresh="onRefresh">
  <PressMatchTeamList 
    :list="teamList"
    :loading="loading"
    :finished="finished"
    @load-more="loadMore"
  />
</press-pull-refresh>

# 如何自定义队伍项的样式？

组件内部使用 press-match-team-item 组件渲染每个队伍项，可以通过全局样式或者 CSS 变量进行定制。

# 加载状态显示异常怎么办？

请检查 loading 和 finished 状态的管理逻辑，确保在数据加载开始时设置 loading: true，加载完成后设置 loading: false，没有更多数据时设置 finished: true。

← MatchTeamItem MatchUserItem →