从零开始：Vue.js 实现活动列表页面的详细教程「超详细」Vue.js 活动列表页面开发，附完整代码！一步步带你用 Vue.js 制作活动页面 - 新手友好 Vue.js 小项目：活动展示页面开

效果图

在这里插入图片描述

使用 Vue.js 构建活动列表界面 - 新手入门详细教程

在本教程中，我们将使用 Vue.js 构建一个活动列表页面，页面包含平台公告、活动分类标签、活动列表等功能。用户可以在“热门活动”和“官方活动”之间切换，并点击“查看更多”加载更多活动。

1. 项目概述

这个项目旨在展示如何使用 Vue.js 构建一个简单的活动展示页面。我们会模拟一些假数据，创建一个界面，让用户能够在不同的活动分类中切换查看。

2. 准备工作

在开始之前，请确保您对 HTML 和基本的 JavaScript 有一些基础了解。如果您还不了解 Vue.js，可以先阅读一些基础教程，这样会对您理解本项目有帮助。

我们将使用 Vue.js 的 CDN 直接引入 Vue，所以不需要安装任何工具或框架。

3. 步骤一：创建 HTML 页面结构

在 HTML 页面中，我们首先引入 Vue.js 的 CDN，并编写页面的基本结构。我们将页面分成几个部分，包括平台公告、活动分类标签和活动列表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>活动列表 - Vue 示例</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    /* 页面样式 */
    body {
      
      
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    #app {
      
      
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .announcement {
      
      
      background-color: #ffe7e7;
      color: #e74c3c;
      padding: 10px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .announcement img {
      
      
      width: 30px;
      height: 30px;
      background-color: #f4bfbf;
      border-radius: 50%;
      margin-right: 10px;
    }
    .title {
      
      
      font-size: 16px;
      font-weight: bold;
    }
    .tabs {
      
      
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .tab {
      
      
      flex: 1;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .tab.active {
      
      
      color: #e74c3c;
      font-weight: bold;
      border-bottom: 2px solid #e74c3c;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 平台公告 -->
  <div class="announcement">
    <img alt="公告图标">
    <div class="title">社区公约</div>
  </div>

  <!-- 活动分类标签 -->
  <div class="tabs">
    <div class="tab" :class="{ active: activeTab === 'hot' }" @click="activeTab = 'hot'">热门活动</div>
    <div class="tab" :class="{ active: activeTab === 'official' }" @click="activeTab = 'official'">官方活动</div>
  </div>

  <!-- 活动列表 -->
  <div class="events-section">
    <h3>{
   
   { activeTab === 'hot' ? '热门活动' : '官方活动' }}</h3>
    <div v-for="(event, index) in filteredEvents" :key="index" class="event">
      <img alt="活动图片">
      <div class="event-info">
        <div class="event-title">{
   
   { event.title }}</div>
        <div class="event-date">{
   
   { event.date }}</div>
        <div>
          <span class="event-participants">{
   
   { event.participants }}人参与</span>
        </div>
      </div>
    </div>
    <div class="view-more" @click="loadMoreEvents">查看更多</div>
  </div>
</div>
</body>
</html>

4. 步骤二：定义 Vue 实例和数据

在 <script> 标签中初始化 Vue 实例，并定义假数据用于填充活动信息。我们还需要一个 activeTab 来控制当前显示的活动类型。

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      activeTab: 'hot',  // 当前激活的标签，默认显示热门活动
      events: [
        {
      
       title: '骑行友好计划', date: '11-01 至 12-02', participants: '20.5万', category: 'hot' },
        {
      
       title: '秋游记：发随拍笔记，赢流量大奖', date: '10-26 至 11-09', participants: '3.8万', category: 'hot' },
        {
      
       title: '人类幼崽cos大赛', date: '10-23 至 11-05', participants: '3281', category: 'hot' },
        {
      
       title: '镇头星的浮光探金', date: '11-01 至 11-30', participants: '1024', category: 'official' },
        {
      
       title: '小针针的艺术朋友', date: '10-27 至 11-30', participants: '1302', category: 'official' },
        {
      
       title: '喜茶「直播抽奖」功德重磅来袭！', date: '10-24 至 11-06', participants: '41.9万', category: 'hot' },
      ]
    },
  });
</script>

5. 步骤三：实现活动分类标签的切换功能

在 tabs 中，我们通过 @click 事件来切换 activeTab 的值，使得用户点击标签时可以显示对应的活动类型。

<div class="tabs">
  <div 
    class="tab" 
    :class="{ active: activeTab === 'hot' }" 
    @click="activeTab = 'hot'"
  >热门活动</div>
  <div 
    class="tab" 
    :class="{ active: activeTab === 'official' }" 
    @click="activeTab = 'official'"
  >官方活动</div>
</div>

6. 步骤四：动态渲染活动列表

使用 computed 属性 filteredEvents 来筛选显示的活动列表，只有 activeTab 所对应的活动会显示在列表中。

<script>
  computed: {
      
      
    filteredEvents() {
      
      
      return this.events.filter(event => event.category === this.activeTab);
    }
  }
</script>

7. 步骤五：实现“查看更多”功能

在 “查看更多” 按钮上添加点击事件处理函数。实际开发中可以加载更多数据，这里用 alert 作为示例。

<div class="view-more" @click="loadMoreEvents">查看更多</div>

methods: {
  loadMoreEvents() {
    alert('加载更多活动');
    // 实际应用中，这里可以添加新的数据或加载更多活动
  }
}

8. 完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>活动列表 - Vue 示例</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    body {
      
      
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    #app {
      
      
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .announcement {
      
      
      background-color: #ffe7e7;
      color: #e74c3c;
      padding: 10px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .announcement img {
      
      
      width: 30px;
      height: 30px;
      background-color: #f4bfbf;
      border-radius: 50%;
      margin-right: 10px;
    }
    .title {
      
      
      font-size: 16px;
      font-weight: bold;
    }
    .events-section {
      
      
      margin-top: 20px;
    }
    .events-section h3 {
      
      
      font-size: 18px;
      margin-bottom: 10px;
    }
    .event {
      
      
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 4px;
      border: 1px solid #ddd;
    }
    .event img {
      
      
      width: 60px;
      height: 40px;
      background-color: #ddd;
      border-radius: 4px;
      margin-right: 10px;
    }
    .event-info {
      
      
      flex: 1;
    }
    .event-title {
      
      
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .event-date {
      
      
      font-size: 12px;
      color: #888;
    }
    .event-participants {
      
      
      font-size: 12px;
      color: #e74c3c;
      margin-left: 5px;
    }
    .tabs {
      
      
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .tab {
      
      
      flex: 1;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .tab.active {
      
      
      color: #e74c3c;
      font-weight: bold;
      border-bottom: 2px solid #e74c3c;
    }
    .view-more {
      
      
      display: block;
      text-align: center;
      margin-top: 10px;
      color: #3498db;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 平台公告 -->
  <div class="announcement">
    <img alt="公告图标">
    <div class="title">社区公约</div>
  </div>

  <!-- 活动分类标签 -->
  <div class="tabs">
    <div 
      class="tab" 
      :class="{ active: activeTab === 'hot' }" 
      @click="activeTab = 'hot'"
    >热门活动</div>
    <div 
      class="tab" 
      :class="{ active: activeTab === 'official' }" 
      @click="activeTab = 'official'"
    >官方活动</div>
  </div>

  <!-- 活动列表 -->
  <div class="events-section">
    <h3>{
   
   { activeTab === 'hot' ? '热门活动' : '官方活动' }}</h3>
    <div v-for="(event, index) in filteredEvents" :key="index" class="event">
      <img alt="活动图片">
      <div class="event-info">
        <div class="event-title">{
   
   { event.title }}</div>
        <div class="event-date">{
   
   { event.date }}</div>
        <div>
          <span class="event-participants">{
   
   { event.participants }}人参与</span>
        </div>
      </div>
    </div>
    <div class="view-more" @click="loadMoreEvents">查看更多</div>
  </div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      activeTab: 'hot',
      events: [
        // 假数据示例
        {
      
       title: '骑行友好计划', date: '11-01 至 12-02', participants: '20.5万', category: 'hot' },
        {
      
       title: '秋游记：发随拍笔记，赢流量大奖', date: '10-26 至 11-09', participants: '3.8万', category: 'hot' },
        {
      
       title: '人类幼崽cos大赛', date: '10-23 至 11-05', participants: '3281', category: 'hot' },
        {
      
       title: '镇头星的浮光探金', date: '11-01 至 11-30', participants: '1024', category: 'official' },
        {
      
       title: '小针针的艺术朋友', date: '10-27 至 11-30', participants: '1302', category: 'official' },
        {
      
       title: '喜茶「直播抽奖」功德重磅来袭！', date: '10-24 至 11-06', participants: '41.9万', category: 'hot' },
        // 更多假数据
      ]
    },
    computed: {
      
      
      filteredEvents() {
      
      
        return this.events.filter(event => event.category === this.activeTab);
      }
    },
    methods: {
      
      
      loadMoreEvents() {
      
      
        alert('加载更多活动');
        // 实际应用中，这里可以添加新的数据或加载更多活动
      }
    }
  });
</script>
</body>
</html>

9. 总结

通过本教程，我们学习了如何使用 Vue.js 构建一个活动展示页面。我们实现了标签切换、动态渲染和查看更多功能，为实际开发提供了基础模板。