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

Home页分析

对于初始页面，掘金的Home页面十分平常且温和，我们从上往下分析。

两个Header组件：

文章组件：

侧边组件：

Header组件

上方功能导航页面会在下拉400px隐藏，再上拉又可显示，个人思路是监听滚轮事件，并且依次判断来显示或者隐藏，有CSS渲染就渲染一下。下方Header则为标签，在Home页面是显示的，而在详情页面则会消失，我们可以监听路由来判断，以此来显示或者隐藏。

说白了写个组件模板然后有数据依次用for遍历即可，难点在于无限滚轮，即只懒加载显示一部分数据，下拉则会继续显示（直接把数据加载完电脑不得卡死？），这是一种很好的优化手段，也是掘金项目中多个页面频繁用到的技术点。

很多余的广告部分= =，唯一可观的技术点就是下拉到一定距离变成固钉，这没啥说的，监视滚轮判断改变一下CSS样式完事了。

Header组件直接sticky，优先度拉到较高，对于下方，就是典型的两栏布局，八股文也是基础题，一个flex布局轻松搞定，在写项目的时候拆组件的时候拆明白了，到后面优化也舒服一点。

Header标签组件在掘金中是可以修改标签内容的，这就需要后端背锅了，对于下拉后会在右下角出现回到顶部小功能：

以及建议反顾（程序员速来加班）：

对于搜索栏功能，在点击后长度伸长，创作者中心消失，没办法，这个有心思就CSS慢慢写呗。

这篇文章只是对于Home页面大致分析，虽然掘金页面看似简单，实则是蕴含不少技术点的，想写好做好优化也不是那么容易，之后会对其他页面及其功能大致分析或者对于单独技术点具体分析。