黑马头条vue2.0项目实战（四）——首页—文章列表

目录

1. 头部导航栏

1.1 页面布局

1.2 样式调整中遇到的问题

2. 频道列表

2.1 页面布局

2.2 样式调整

2.3 展示频道列表

3. 文章列表

3.1 思路分析

3.2 使用 List 列表组件

3.3 加载文章列表数据

3.4 下拉刷新

3.5 设置上下padding固定头部和频道列表

3.6 记住列表的滚动位置

4. 文章列表项

4.1 准备组件

4.2 展示列表项内容

4.3 样式调整

4.4 关于第三方图片资源403问题

4.5 处理相对时间

---

1. 头部导航栏

1.1 页面布局

• 使用导航栏组件（NavBar 导航栏）

• 在导航栏组件中插入按钮：文本、图标
• 样式调整：宽高、背景色、边框、文本大小、图标大小

1.2 样式调整中遇到的问题

• 问题：给 button 按钮按照设计图设置样式之后，但是在网页中无法生效，显示不全，如下图所示。

• 原因：检查元素发现 button 按钮的父级元素的父级使用了flex布局，并且给 button 按钮的宽度设置了最大宽度为 60%，而 button 按钮的宽度大于父级元素的最大宽度 60%，所以导致 button 按钮显示不全，如下图所示。
  • 此时在 css 中给button 按钮的父级元素的最大宽度设置为 80% ，完成样式覆盖即可。
  • 但设置的最大宽度为 80% 无法生效，检查元素发现 button 按钮的父级元素的最大宽度依然是 60%，无法完成样式覆盖。

• 解决方法：由于 Vant 组件库可能有更高优先级的样式，可以使用深度选择器来确保样式覆盖。

2. 频道列表

2.1 页面布局

使用 Tab 标签页组件

• 通过 animated 属性可以开启切换标签内容时的转场动画。

• 通过 swipeable 属性可以开启滑动切换标签页。

2.2 样式调整

① 基础样式调整

• 标签项：右边框、下边框、宽高、文字大小、文字颜色

• 底部条：宽高、颜色、位置

② 处理汉堡按钮

• 使用插槽插入内容
• 样式调整：定位、内容居中、宽高、背景色、透明度、字体图标大小
• 使用伪元素设置渐变边框：定位、宽高、背景图、背景图填充模式

2.3 展示频道列表

思路：

        ① 找数据接口

        ② 把接口封装为请求方法

        ③ 在组件中请求获取数据

        ④ 模板绑定

3. 文章列表

3.1 思路分析

你的思路可能是这样的：

        ① 找到数据接口

        ② 封装请求方法

        ③ 在组件中请求获取数据，将数据存储到 data 中

        ④ 模板绑定展示

根据不同的频道加载不同的文章列表，你的思路可能是这样的：

• 有一个 list 数组，用来存储文章列表

• 查看 a 频道：请求获取数据，让 list = a 频道文章

• 查看 b 频道：请求获取数据，让 list = b 频道文章

• 查看 c 频道：请求获取数据，让 list = c 频道文章

思路没有问题，但是并不是我们想要的效果。

我们想要的效果是：加载过的数据列表不要重新加载。

实现思路也非常简单，就是我们准备多个 list 数组，每个频道对应一个，查看哪个频道就把数据往哪个频道的列表数组中存放，这样的话就不会导致覆盖问题。

可是有多少频道就得有多少频道文章数组，我们都一个一个声明的话会非常麻烦，所以这里的建议是利用组件来处理。

具体做法就是：

• 封装一个文章列表组件

• 然后在频道列表中把文章列表遍历出来

因为文章列表组件中请求获取文章列表数据需要频道 id，所以 频道 id 应该作为 props 参数传递给文章列表组件，为了方便，我们直接把频道对象传递给文章列表组件就可以了。

在文章列表中请求获取对应的列表数据，展示到列表中。

最后把组件在频道列表中遍历出来，就像下面这样。

• 创建 src/views/home/components/article-list.vue（因为该组件不是多个页面都会用到的组件，只有在home中用到，所以方便管理，可以在当前文件夹下创建组件）
• 在 home/index.vue 中注册使用
• 使用 keepAlive 组件缓存技术提高性能

为什么标签内容是懒渲染的？

• 因为这是 Tab 标签页组件本身支持的默认功能，如果不需要可以通过配置 :lazy-render="false" 来关闭这个效果。

3.2 使用 List 列表组件

List 列表组件：瀑布流滚动加载，用于展示长列表。

List 组件通过 loading 和 finished 两个变量控制加载状态， 当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 设置成 true，此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

• load 事件：

  • List 初始化后会触发一次 load 事件，用于加载第一屏的数据。

  • 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。

• loading 属性：控制加载中的 loading 状态

  • 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）

  • 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件

• finished 属性：控制加载结束的状态

  • 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束

  • 所有数据加载结束，finished 为 true，此时不会触发 load 事件

3.3 加载文章列表数据

实现思路：

• 找到数据接口

• 封装请求方法

  • 创建 src/api/article.js 封装获取文章列表数据的接口

• 请求获取数据

  • 然后在首页文章列表组件 onload 的时候请求加载文章列表

• 模板绑定

3.4 下拉刷新

这里主要使用到 Vant 中的 PullRefresh 下拉刷新 组件。

思路：

• 注册下拉刷新事件（组件）的处理函数

• 发送请求获取文章列表数据

• 把获取到的数据添加到当前频道的文章列表的顶部

• 关闭下拉刷新的 loading 状态

• 提示用户刷新成功！

下拉刷新时会触发组件的 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

3.5 设置上下padding固定头部和频道列表

• 在 home/index.vue 的根节点上设置上下的 padding，保证列表数据完全显示。
• 固定头部导航栏和频道列表的位置

头部导航栏固定定位：

频道列表固定定位：

•  sticky  是否使用粘性定位布局

• offset-top v2.8.7 粘性定位布局下与顶部的最小距离，支持 px vw vh rem 单位，默认 px

  • postcssrc 不能转换行内样式中的 px，所以页面多少，行内样式写多少

• 

3.6 记住列表的滚动位置

• 问题：如下图所示，在频道为 c++ 页面向下滚动列表到某个位置，如《手把手教你mockjs实际项目快速搭建》的位置。

        此时切换到其他频道查看列表数据，如 css 频道，再次切回 c++ 频道的时候，发现列表又回到的初始的位置，造成用户体验效果不好。我们希望记住某个频道列表滚动的位置，这样在用户查看某个频道下的数据，来回切换列表的时候，该频道下显示的依然是用户刚刚滚动过的列表的位置。

• 为什么列表滚动会相互影响？

  • 因为他们并不是在自己内部进行滚动，而是在整个 body 页面在滚动。

  • 无论你是在 a 频道还是在 b 频道，其实滚动的都是 body 元素。

• 这里分享一个小技巧：如何快速找到是那个元素产生的滚动？

        把下面的代码粘贴到浏览器调试工具中运行一下，然后滚动页面，就可以看到是那个元素产生的滚动了。

function findScroller(element) {element.onscroll = function() {console.log(element)}Array.from(element.children).forEach(findScroller)
}findScroller(document.body)

        如下图所示，浏览器输出的元素为 body 标签，说明滚动的元素 body。

• 解决方案： 让每一个标签内容文章列表产生自己的滚动容器，这样就不会相互影响了。
• 如何让标签内容文章列表产生自己的滚动容器呢？
  • 固定高度： height： xxx
  • 溢出滚动： overflow-y: auto
• 然后给我们的文章列表组件的根节点样式设置如下：

.article-list {height: 100%;overflow: auto;
}

• 但是我们发现设置高 100% 的话没有用，这是为什么？

  • 因为百分比是相对于父元素，而我们通过审查元素发现所有的父元素都没有高，那么肯定没有作用了。

• 难道我们为了让这个子元素高度百分百，就一个一个的把所有的父元素都设置高百分百吗？
  • 虽然可以但是不可取，太麻烦了。
• 最优解决方案：
  • css3 中新增了一种视口单位 vw 和 vh，何谓视口，就是根据你的浏览器窗口的大小的单位，不受父元素的影响。

  • 在移动端，视口单位相对于布局视口。

  • 1 vw = 可视窗口宽度的百分之一，比如窗口的宽度是 750，则 1 vw = 7.5 px。

  • 1 vh = 可视窗口高度的百分之一，比如窗口的高度是 667，则 1 vw = 6.67 px。

  • 使用它唯一需要注意的就是他的兼容性：pc 端已经兼容到了 IE 9，在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到了完美的全面支持，vue 本身值都只兼容到了 IE 9，所以可以使用这个视口单位。

  • 所以最终的设置的代码如下：

    • height: 79vh，是根据调试工具调试而来，也就是文章列表实际的所占的视口高度大小。

4. 文章列表项

4.1 准备组件

在我们项目中有好几个页面中都有这个文章列表项内容，如果我们在每个页面中都写一次的话不仅效率低而且维护起来也麻烦。所以最好的办法就是我们把它封装为一个组件，然后在需要使用的组件中加载使用即可。

① 创建 src/components/article-item/index.vue 组件

② 在文章列表组件中注册使用文章列表项组件

4.2 展示列表项内容

• 使用 Cell 单元格组件

• 展示标题

• 展示底部信息

4.3 样式调整

vant 内置样式：Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

如：

其他的看文档。

4.4 关于第三方图片资源403问题

• 为什么文章列表数据中的好多图片资源请求失败返回 403？
  • 这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。
• 第三方平台怎么处理图片资源保护的？
  • 服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。

• Referer 是什么东西？
  • 扩展参考： HTTP Referer 教程 - 阮一峰的网络日志
  • Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含了当前请求资源的来源页面的地址。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。
  • 需要注意的是 referer 实际上是 "referrer" 误拼写。参见 HTTP referer on Wikipedia （HTTP referer 在维基百科上的条目）来获取更详细的信息。
• 怎么解决？
  • 不要发送 referrer ，对方服务端就不知道你从哪来的了，姑且认为是你是自己人吧。
• 如何设置不发送 referrer？
  • 用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略，例如：
  • 
  • 或者直接在 HTMl 页面头中通过 meta 属性全局配置：
  • 

4.5 处理相对时间

推荐两个第三方库：

• Moment.js

• Day.js

两者都是专门用于处理时间的 JavaScript 库，功能差不多，因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些，因为它采用了插件化的处理方式。

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。

• Day.js 可以运行在浏览器和 Node.js 中。

• 🕒 和 Moment.js 相同的 API 和用法

• 💪 不可变数据 (Immutable)

• 🔥 支持链式操作 (Chainable)

• 🌐 国际化 I18n

• 📦 仅 2kb 大小的微型库

• 👫 全浏览器兼容

使用步骤：

        ① 安装：npm i dayjs 或者 yarn add dayjs

        ② 创建 utils/dayjs.js。具体使用配置以及用到的哪些插件或方法，看文档。

        ③ 在 main.js 中加载初始化

        ④ 使用全局过滤器