【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 沸点列表抽取封装

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

前言

大家好，昨天我们已经实现了沸点内容和评论内容的点赞功能以及查看更多评论功能（关于查看更多评论功能目前我们只实现了简单的页面跳转，关于内容加载我们后期再进行补充）。基本上沸点列表功能就基本上算是完成了。但是目前我们完成的仅仅是「发现」tab页中的列表，而在我们的设计中还有个「热榜」和「关注」列表，并且这几个tab页除了加载内容不同外，其它布局和结构貌似都是一样的，因此我们可以把现在已经做好的「发现」页中的列表进行抽取和封装以实现三个页面共用。今天我们要实现的目标：

发现列表抽取及封装
热榜列表加载
关注列表加载

沸点列表抽取及封装

目前为止我们实现的沸点列表中（Fire.vue）除了三个tab页的代码外，其它的代码全部都是属于列表的，因此列表的封装非常简单，只需要把Fire.vue中关于列表的代码全部抽取出来即可。另外我们再来看一下下图中，「最新」「热门」和「关注」三个页面布局都是一样的，唯一不同的就是所加载的数据不同，并且我们从图中也可以看出，三个页面所请求的接口也是不同的，而我们要封装的列表是需要给三个页面共用的，因此我们必须把不同的地方作为参数动态传进去，也就是说接口需要动态传入，其它的可以直接使用原来的代码即可。大概实现思路如下：

在views中新建一个PinList.vue组建
将Fire.vue中关于列表数据的代码（html，js和css）原封不动的拷贝到PinList.vue中
为了能够实现3个页面加载请求不同的接口，我们还需在定义一个props属性 - url，用于接收接口地址
修改setup中的load方法，将原来的请求接口字符串替换成 url 属性

核心代码如下：

<!-- html部分没有需要修改，只需把Fire.vue中关于列表的直接拷贝过来即可 -->
<div class="topic">
    <div class="title-box"></div>
    <div class="topic-box"></div>
</div>
<van-pull-refresh></van-pull-refresh>
复制代码

//js 代码中也是把Fire.vue中列表相关的拷贝过来，然后再添加一个url属性
export default {
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  setup(props,ctx){
    const { url } = props;
    const onLoad = function () {
      http
        .post(url, {
          cursor: pageNo,
          limit: 20,
          sortType: 300,
        }).then(res=>{
            //....
        });
  }
}
复制代码

热榜和关注页功能实现

上面我们已经把列表进行了抽取和封装，现在相当于3个列表页都已经实现了，我们只需要在Fire.vue中导入PinList并传入不同的url即可实现，关键代码及效果图如下：

<template>
  <van-tabs sticky color="#1e80ff" title-active-color="#1e80ff">
    <van-tab title="发现">
      <div class="tab-content">
        <pin-list url="/juejin/recommend_pins" />
      </div>
    </van-tab>
    <van-tab title="热榜">
      <div class="tab-content">
        <pin-list url="/juejin/hot_pins" />
      </div>
    </van-tab>
    <van-tab title="关注">
      <div class="tab-content">
        <pin-list url="/juejin/follow_pins" />
      </div>
    </van-tab>
  </van-tabs>
  <div class="publish">
    <van-icon name="edit" />
  </div>
</template>
复制代码

import PinList from "./PinList.vue";
export default {
  components: {
    PinList,
  },
};
复制代码

总结

今天的分享非常简单，我们把沸点列表进行了抽取和封装，同时实现了热榜和关注功能。好了本次分享就先到这里了，喜欢的朋友欢迎给个赞哦！