Press Next

# MatchTeamList Team List

A component for displaying a list of match teams with scroll-to-load-more functionality. Built on top of press-ui's press-list, it internally uses PressMatchTeamItem component to show detailed information for each team.

# Import

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

# Usage

# Basic Usage

<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;
  
  // Simulate async data loading
  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('Apply to join team:', team, index);
};
</script>

# Scroll Load More

The component has built-in scroll-to-load-more functionality that automatically triggers the load-more event when users scroll to the bottom.

<PressMatchTeamList
  :list="teamList"
  :loading="loading"
  :finished="finished"
  :finish-text="'All teams loaded'"
  @load-more="loadMore"
/>

# Custom Empty State

<PressMatchTeamList
  :list="[]"
  :empty-text="'No team information available'"
  @load-more="loadMore"
/>

# Complete Example

<template>
  <div class="demo-wrap">
    <PressMatchTeamList
      :list="teamList"
      :loading="loading"
      :finished="finished"
      :empty-text="'No team data available'"
      :finish-text="'All teams loaded'"
      @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;

// Initialize data
const initData = () => {
  teamList.value = [...mockData.initialTeamList];
  currentPage.value = 1;
  finished.value = false;
};

// Load more data
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('Apply to join team:', team, 'Index:', index);
  uni.showToast({
    title: `Apply to join ${team.name}`,
    icon: 'success',
  });
};

// Initialize
initData();
</script>

# API

# Props

Prop Description Type Default
list Team list data Array []
loading Whether data is loading boolean false
finished Whether all data is loaded boolean false
empty-text Empty state text string 'No data'
finish-text Finish loading text string 'No more data'
custom-class Custom CSS class string ''
custom-style Custom styles string \| object ''

# Events

Event Description Parameters
load-more Triggered when scrolled to bottom -
apply Triggered when apply button is clicked (team: object, index: number)

# Team Data Structure

interface TeamInfo {
  id: string | number;           // Team ID
  name: string;                  // Team name
  avatar?: string;               // Team avatar
  memberCount: number;           // Current member count
  maxMembers: number;            // Maximum members
  tags?: Array<{                 // Tag list
    text: string;
    type: 'primary' | 'success' | 'warning' | 'danger';
  }>;
  description?: string;          // Team description
  requirements?: string;         // Join requirements
  isApplied?: boolean;          // Whether already applied
}

# Notes

  1. Data Loading: The component doesn't handle data fetching logic itself. Implement data loading in the parent component through the load-more event
  2. State Management: Properly manage loading and finished states in the parent component to ensure good user experience
  3. Performance: Recommend paginated loading for large datasets to avoid rendering too much content at once
  4. Responsive: The component is mobile-optimized and displays well across different screen sizes

# FAQ

# How to implement pull-to-refresh?

Use with press-ui's pull-refresh component:

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

# How to customize team item styles?

The component uses press-match-team-item internally to render each team item. You can customize through global styles or CSS variables.

# LoadingPlus state display issues?

Check your loading and finished state management logic. Ensure loading: true when data loading starts, loading: false when complete, and finished: true when no more data is available.

← MatchUserItem →