打造互动社区：在 Vue3 + Vant3 中创建活动页面

导语

在上一篇文章中，我们成功构建了话题广场页面，并通过调用官方 API 获取数据，实现了页面的动态渲染。今天，我们将继续前进，创建一个活动页面，其布局与话题广场非常相似。

页面布局

活动页面由以下主要部分组成：

• 头部： 包含活动标题、筛选器和搜索框。
• 列表： 展示活动列表，包括活动标题、、时间和地点。
• 分页： 允许用户在活动页面之间导航。

数据获取

与话题广场页面类似，我们将使用 Vuex 来管理活动数据。首先，我们需要创建一个 Vuex 模块，包含以下属性：

const activityModule = {
  state: {
    activities: [],
  },
  getters: {
    getActivities: (state) => state.activities,
  },
  mutations: {
    setActivities: (state, activities) => (state.activities = activities),
  },
  actions: {
    fetchActivities({ commit }) {
      // 发起 API 请求获取活动数据
      fetch('api/activities')
        .then((res) => res.json())
        .then((data) => commit('setActivities', data))
        .catch((error) => console.error(error));
    },
  },
};

组件使用

我们使用 Vant3 组件库来构建页面UI。以下是活动页面中使用的主要组件：

• NavBar： 用于创建头部。
• Field： 用于创建搜索框。
• List： 用于展示活动列表。
• Pagination： 用于创建分页器。

用户交互

用户可以在活动页面中执行以下操作：

• 筛选： 用户可以通过筛选器按活动类型过滤活动列表。
• 搜索： 用户可以在搜索框中输入关键词来搜索特定活动。
• 查看详情： 用户可以点击活动标题查看活动详情。

总结

通过结合 Vue3 和 Vant3，我们构建了一个交互性和参与度都非常高的活动页面。通过在开发中遵循这些指南，您可以创建自己的令人印象深刻的 web 应用程序页面，为您的用户提供丰富的体验。