仿掘金官网项目需求 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天 今天我们大项目小队举行第一次会晤，主要分析了以下项目需求。并且对项目中的重点————无限列表的实现方式进行了初步的确定。

首页

• 顶部导航栏

  网站图标、快捷菜单、搜索框、创作者中心、消息、个人中心

• 标签栏（面包屑）

  标签、标签管理

• 内容区

  两栏布局。左侧顶部为筛选菜单，下面是文章列表（无限列表难点）；右侧为广告推荐区域（粘性定位）

内容页

• 顶部导航栏

  网站图标、快捷菜单、搜索框、创作者中心、消息、个人中心

• 标签栏

  标签、标签管理

• 内容区

  • 三栏布局
  • 左侧点赞评论快捷按钮，评论按钮点击之后跳转到品论区（固定定位）
  • 中间上部文章内容、下部评论区（无限列表）
  • 右侧作者信息、广告、目录（粘性定位）
  • 右下角 回到顶部、建议反馈

无限列表

项目当中一个难点就是文章列表的数量庞大，如果采取普通的加载方式，加载速度会很慢。解决这一问题，通常有两种方案：分页和无限下拉。

分页

分页技术是指将内容信息划分成独立的页面来显示。列表以固定条数显示在页面上，下方一般带有分页器，可以跳转到相应页数，分页加载。当用户是在结果列表查找特定的信息而不是仅仅浏览信息流时，分页就是好的选择——用户可以知道结果的准确数量，能够决定在哪里停下或者精读哪些结果，政务类网站以分页显示居多。

无限下拉

无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

相比点击，滚动操作起来也更加容易，对移动设备很友好。

无限下拉的两种实现方式

• 懒加载 当页面滚动到底部时，进行下一页内容的查询并将结果添加到结果列表中，这就是懒加载。在这种场景下，列表中的 dom元素数量是累加的。
• 虚拟列表 虚拟列表（也叫虚拟滚动），尽管在表现形式上与懒加载相似，但列表中展示的 dom元素数量实际是固定的。