Vue 3 + UniApp 实现列表展示页面和搜索页面

功能描述：

1. 主页面 (Index.vue) 显示一个不可编辑的搜索框、项目总数和项目列表。
2. 点击主页面的搜索框会导航到搜索页面 (Search.vue)。
3. 搜索页面包含一个可编辑的搜索框和项目列表。
4. 在搜索页面输入内容时，会调用后端 API 获取匹配的项目数据。
5. 项目列表使用单独的组件 (ProjectList.vue) 来展示，可以在两个页面中复用。

使用Vue 3 + UniApp 实现的列表展示页面和搜索页面的示例：

1. 首先，创建一个 types.ts 文件来定义项目类型：

// types.ts
export interface Project {
  id: number;
  name: string;
  description: string;
}

2. 创建一个 api.ts 文件来处理 API 请求：

// api.ts
import axios from 'axios';
import { Project } from './types';

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

export const searchProjects = async (query: string): Promise<Project[]> => {
  const response = await instance.get<Project[]>('/projects', { params: { q: query } });
  return response.data;
};

3. 创建一个 ProjectList.vue 组件来展示项目列表：

<!-- ProjectList.vue -->
<template>
  <view class="project-list">
    <view v-for="project in projects" :key="project.id" class="project-item">
      <text class="project-name">{{ project.name }}</text>
      <text class="project-description">{{ project.description }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { Project } from './types';

defineProps<{
  projects: Project[];
}>();
</script>

<style scoped>
.project-list {
  padding: 10px;
}
.project-item {
  margin-bottom: 10px;
}
.project-name {
  font-weight: bold;
}
.project-description {
  font-size: 14px;
  color: #666;
}
</style>

4. 创建主页面 Index.vue：

<!-- Index.vue -->
<template>
  <view class="container">
    <view class="search-bar" @tap="navigateToSearch">
      <input class="search-input" type="text" placeholder="请输入项目名" disabled />
    </view>
    <view class="total-count">
      总项目数: {{ projects.length }}
    </view>
    <project-list :projects="projects" />
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { searchProjects } from './api';
import { Project } from './types';
import ProjectList from './ProjectList.vue';

const projects = ref<Project[]>([]);

onMounted(async () => {
  projects.value = await searchProjects('');
});

const navigateToSearch = () => {
  uni.navigateTo({ url: '/pages/search/search' });
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.search-bar {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.search-input {
  width: 100%;
}
.total-count {
  margin-bottom: 10px;
  font-weight: bold;
}
</style>

5. 创建搜索页面 Search.vue：

<!-- Search.vue -->
<template>
  <view class="container">
    <view class="search-bar">
      <input
        class="search-input"
        type="text"
        v-model="searchQuery"
        placeholder="请输入项目名"
        @input="handleSearch"
      />
    </view>
    <project-list :projects="searchResults" />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { searchProjects } from './api';
import { Project } from './types';
import ProjectList from './ProjectList.vue';

const searchQuery = ref('');
const searchResults = ref<Project[]>([]);

const handleSearch = async () => {
  if (searchQuery.value.trim()) {
    searchResults.value = await searchProjects(searchQuery.value);
  } else {
    searchResults.value = [];
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.search-bar {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.search-input {
  width: 100%;
}
</style>

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓