【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 沸点页优化1

西瓜watermelon
728 阅读4分钟

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

前言

大家好，终于又等来了掘金的更文活动。继上一次的分享中我们实现了“沸点”页面中【热榜】标签页的推荐圈子及沸点列表展示功能，到目前为止页仅仅是实现了数据的加载展示功能，还有一些细节问题尚未实现，目前还存在如下问题，比如：

  • 推荐圈子中点击圈子没有任何反应，正常应该是跳转对对应的圈子列表
  • 沸点列表中目前只加载来20条数据无法刷新和滚动翻页
  • 当沸点内容过长时应该折叠，点击展开后再显示全部内容，而现在是所有内容都展示出了
  • 沸点图片没有处理，应该固定大小，点击后再展示原图大小 今天的分享中，我们将实现前两点优化，即实现点击圈子跳转到新页面和沸点列表的下拉刷新及滚动翻页功能。

为推荐圈子添加click事件并跳转新页面

我们先来看下官方app是如何实现的，首先在沸点的推荐圈子模块中分为3种类型的圈子：我加入的圈子，发现更多圈子和推荐的具体的圈子。当点击“我的加入的圈子”和“发现更多”时跳转的是同一个页面中的不同tab页，并分别展示我加入的圈子和掘金所有的圈子；当点击具体的某个圈子时则是跳转到另一个新页面并展示该圈子下的沸点内容。我们今天的分享将实现点击圈子并跳转到对应的新页面即可，关于新页面的内容展示暂时先不实现。

这里在实现“我加入的圈子”和“发现更多圈子”时有个需要注意的点：就是两个行为最终是跳转到同一个页面不同的tab页，因此需要给新页面定义一个参数路由，然后通过接收参数来控制该显示哪个tab页

  • 首先分别新建Topic.vue和TopicPins.vue两个组件，用于展示我的圈子和圈子广场以及点击某个圈子后该圈子下面的沸点内容
  • 在Topic.vue中添加一个van-tabs组件，并添加两个子项：我的圈子和圈子广场
  • 在Topic.vue的setup方法中接收路由参数：active以决定激活哪个tab页
  • 分别配置两个页面对应的路由信息，注意两个页面都需要配置成参数路由
  • 在沸点首页Fire.vue中定义toTopicList和toTopicPins两个方法，用于实现页面跳转 核心代码及效果如下：
<!--Topic.vue-->
<template>
  <van-tabs
    sticky
    color="#1e80ff"
    title-active-color="#1e80ff"
    v-model:active="active"
  >
    <van-tab title="我的圈子">我加入的一堆圈子</van-tab>
    <van-tab title="圈子广场">广场上的一堆圈子</van-tab>
  </van-tabs>
</template>

// Topic.vue
setup() {
    const active = ref(0);
    const route = useRoute();
    active.value = Number(route.params.active) || 0;

    return {
      active,
    };

//Fire.vue

 const toTopicList = function (active) {
      router.push(`/topic/${active}`);
    };

    const toTopicPins = function (topic_id) {
      router.push(`/topicpins/${topic_id}`);
    };

test2.gif

沸点列表下拉刷新及滚动翻页

在之前的文章列表中，我们已经实现过列表的下拉刷新和滚动翻页功能了，所以沸点列表实现起来就比较容易了，无论是组件还是方法基本都是一样的，我们只需要把JList.vue中的相关代码拷贝过来改吧改吧基本就能实现了。下拉刷新依然还是用van-pull-refresh组件，列表内容则依然使用van-list组件，另外两个组件用到的onRefresh和onLoad方法实现起来也都是一样的，唯一不同的需要注意的是：

在之前我们请求翻页接口时，都是自己定义一个cursor，然后没翻页一次自动加1或加20等，而沸点的翻页接口稍有不同，这次不用给cursor自动加1或20了，而是每翻页一次后台都会返回给我们一个长字符串，我们再把这个值作为cursor传过去即可实现翻页了

关键代码及效果

<!--Fire.vue-->
 <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="msg in pinList" :key="msg.msg_id">
    ...
    </van-cell>
   </van-list>
  </van-pull-refresh>

const onLoad = function () {
      //   let api_url = store.state.url,
      //     tagId = store.state.tagId;
      http
        .post("/juejin/recommend_pins", {
          cursor: pageNo,
          limit: 20,
          sortType: 300,
        })
        .then((res) => {
          if (state.refreshing) {
            state.pinList = [];
            state.refreshing = false;
          }
          state.pinList.push(...res.data);
          state.loading = false;
          pageNo = res.cursor;//这里不再累加而是直接使用接口返回给我们的值
          
        });
    };

test3.gif

总结

本次分享中我们优化了点击圈子跳转和列表的下拉刷新及滚动翻页功能，还剩下几个问题我们放在下次分享中解决，本次分享就先到这里啦！

avatar
文章
阅读
粉丝