前端基础场第不知道第几天｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第四天。

隔了很多天没写“仿掘金”的代码了，这几天有其他的事情要做，今天有空便试着去写剩下的代码，那么话不多说，开始吧。

承接上回，已经做了把文章的题目、以及简要内容显示到首页上，接下来要做的便是详情页及对首页与其他页面切换时的一些优化。

首先是页面切换

在切换好多次页面后，我发现页面的抖动源于页面右边的滚动条，有的页面数据多有滚动条，有的页面则没有。因此会出现页面抖动的效果，看的眼晕。我刚开始想的办法是将滚动条默认消失掉，即不论在哪个页面都不出现滚动条：

::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

然而这个样式在一些浏览器上可以使用，而在火狐上却不能使用，所以我pass掉它换了另一种方法，即每个页面都添加一个竖直的长方格，用来存放一些广告之类的东西，当然最主要的还是用来解决页面抖动的问题，想到便去做了，效果还是不错的，既然不能保证每个页面的数据加载都足够快，那就放置足够长的盒子来拉伸页面使得滚动条出现。同样的方法我也用到了详情页上面。

其次是详情页

详情页的数据拿去跟前面一篇的基本相同，不过有一个地方要注意，那便是页面跳转时的路由传参。我看掘金的文章他们的地址上面有一串id，我不清楚那是不是文章的id号，但这给了我启发。路由传参时将文章的id号传过来并写在地址中（大概是这么个意思），这样有个好处是在该页面刷新时也可以获得该文章的数据，代码如下：

首先是路由：

  {
      path: "/:cid",
      name: "a",
      component: () => import("../views/content/a.vue"),
    },

其次是详情页面的JS：

setup() {
    const content = reactive([]);
    const route = useRoute();
    const a = route.params.cid;
    onMounted(() => {
      console.log(a);
      const url = "api/user/detail";
      fetch(url, {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        credentials: "same-origin",
        headers: new Headers({
          "Content-Type": "application/json",
        }),
        body: JSON.stringify({
          cid: a,
        }),
        redirect: "follow",
      })
        .then((v) => {
          return v.json();
        })
        .then((v) => {
          content.push(v.content[0]);
        });
    });
    return {
      a,
      content,
    };
  },

后端的代码我就不贴出来了，逻辑以及语法跟上次的代码差不多。

今天就到这了，做的东西很少，后面会尽力加快速度的。