vue3 + vant3开发网页版类掘金app项目二

2024-02-20 13:29:22

开篇寄语

大家好，前面两次分享我们已经实现了首页中推荐标签页的基本功能，包括热榜文章、热榜作者轮播展示，以及推荐文章列表展示、下拉刷新和滚动翻页自动加载数据功能。在首页中除了“推荐”标签页外还有其它10个额外标签页，即在前端视角，我们理解为就是多一个列表页面的设计，其余功能都和首页的推荐标签页是一样的。

需求分析

在开始介绍列表页面的组件封装之前，我们先来回顾一下，列表页面主要有哪些功能：

热榜文章轮播展示
热榜作者轮播展示
文章列表展示
下拉刷新
滚动翻页自动加载数据

这些功能已经基本上概括了列表页面的核心功能，我们把需求分析清楚后，我们就可以很轻松的根据需求逐一设计组件。

组件封装

热榜文章轮播展示组件
热榜作者轮播展示组件
文章列表组件
下拉刷新组件
滚动翻页自动加载数据组件

在前端的设计中，我们将以上组件作为独立的组件进行开发，因为这些组件可以独立使用。假设我们需要开发一个新的列表页面，我们只要将这些组件组合起来使用就可以了，大大提高了开发效率。

下面我们主要以列表组件的开发为主线进行分享，其他组件的功能和开发思路与列表组件类似，我们就不再展开说明了。

列表组件开发

首先，我们先来看一下列表组件的组件声明代码：

<template>
  <div class="list-container">
    <ul class="list-wrapper">
      <li class="list-item" v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ListComponent',
  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.list-container {
  width: 100%;
  padding: 20px;
}

.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.list-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

数据源

我们先来看一下列表组件的props声明部分：

props: {
  list: {
    type: Array,
    required: true
  }
}

通过props声明可以得知，列表组件需要一个名为list的数组数据源，用于渲染列表。

渲染列表

接下来，我们来看一下列表组件的template部分：

<template>
  <div class="list-container">
    <ul class="list-wrapper">
      <li class="list-item" v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

在template部分，我们使用v-for指令循环遍历list数组，并使用{{ item.title }}渲染列表项的标题。

样式

最后，我们来看一下列表组件的style部分：

<style scoped>
.list-container {
  width: 100%;
  padding: 20px;
}

.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.list-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

在style部分，我们对列表组件的样式进行了定义，包括容器样式、列表样式和列表项样式。

组件使用

现在，我们可以将列表组件注册到Vue实例中，并将其用于渲染列表：

import ListComponent from './components/ListComponent.vue'

export default {
  components: {
    ListComponent
  },
  data() {
    return {
      list: [
        { id: 1, title: '文章标题1' },
        { id: 2, title: '文章标题2' },
        { id: 3, title: '文章标题3' }
      ]
    }
  },
  template: `<list-component :list="list"></list-component>`
}