附录5-黑马头条案例，组件库vant

目录

1  效果

2  组件库vant

2.1  安装

2.2  配置

2.3  项目中的使用

2.3.1  引用

2.3.2  tabbar 底部切换

2.3.3  navbar 顶部标题

2.3.4  van-list 上拉触底更新

2.3.5  van-pull-refresh 下拉更新

2.3.6  v-cell

2.3.7  van-icon

2.3.8  自定义风格

3  保持滚动条位置

---

1  效果

一共两个页面，主页是这样的，主页有上拉触底，和下拉刷新两个功能，其余就没有别的功能了

我的 是这样的，我的 这一页没有接任何的数据，他是一个死的页面

2  组件库vant

使用了vant组件库，vant是一个移动端组件库，vant4官网 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

2.1  安装

这里你其实就可以直接用了，下面是优化的方面，如果你的开发完之后，项目打开的非常慢，这个时候你可以考虑按需引入vant，按需引入vant会减少一部分体积

• 即使直接引入最后发布的时候也有方法把vant包的占用空间问题解决

按需引入vant需要使用插件 unplugin-vue-components

2.2  配置

如果是按需引入css，你需要找到项目中的 vue.config.js 然后加上如下内容

如果不按需引入css，就按照下面的方式在main.js引入css，按需与否只有css的区别 import { Button } from 'vant'的用法是相同的

2.3  项目中的使用

2.3.1  引用

全都是在 main.js 中进行引用的

下面简单说一下每个组件的用法，用法也都可以在文档中查到

2.3.2  tabbar 底部切换

• route是开启路由模式
• placeholder是保留一个占位元素，由于tabbar本身是固定定位，默认情况下会盖住他下面的内容，给一个占位元素就让别的元素不往tabbar下面走了
• replace 是保留历史记录的跳转
• to 是区哪个路由
• icon 是用什么小图像

2.3.3  navbar 顶部标题

navbar是导航栏，这里直接就当作标题用了

• title是标题是什么
• fixed 是固定定位
• placeholder 是给一个占位元素

2.3.4  van-list 上拉触底更新

像 v-model:loading="update_loading" 你可以理解为 van-list 这个组件，需要一个名为 loading 的变量，但是他的值你可以自定义，我自定义为update_loading

• loading 是否在加载，开始的时候给true,结束的时候给false
• finished 是否终止上拉触底，一般是没有数据时终止，想终止是给true，不想终止时给false
• finished-text 当你终止的时候在最底下会给你一段文字
• @load是上拉触底的时候你要干些什么东西

2.3.5  van-pull-refresh 下拉更新

• van-pull-refresh 的v-model如果是true就表示正在加载，false就表示加载完了
• @refresh就是下拉的时候要干些什么事情
• disabled就是禁止下拉刷新，true为禁止，false为不禁止，当我们获取不到新的数据的时候就禁止下拉刷新

2.3.6  v-cell

这个就是单纯的样式，van-cell中给的插槽就像下面这样写的，但是我们没用到插槽

2.3.7  van-icon

就是这里的叉

2.3.8  自定义风格

建议通过调试工具找到具体的类名，然后将其原来的css覆盖掉

也可以这样在App.vue中定义整体风格，我现在把上图的样式注释掉，然后在App.vue中加入这些

这样他在某些地方能满足你的要求，但是某些地方不能，比如你的标题

3  保持滚动条位置

我们希望页面切回来的时候，保持滚动条的位置

实现的原理是这样的

1. 在生命周期 mounted() 的时候，通过scroll事件将位置记录下来
2. 在生命周期 activated() 的时候将记录下来的位置给路由
3. 路由通过scrollBehavior()跳转页面位置

执行起来的这样的，首先你要保证HOME组件的活性(如果死了所以信息就都没了)

然后你的路由也需要有一个信息存放的地方，我们称其为元信息

之后处理发信息的一端，有下面几点需要注意

• _.throttle是lodash的节流，滚动事件一秒会触发很多次，我们让其半秒触发一次就够用了
• 在切换的时候会触发滚动事件，而且会滚动到0，这个时候就必须要加入判断条件了，如果你是手动滚上去的，那么window.pageYOffset会是0.0003这样的数，所以不影响手动滚上去的效果
• 你不需要担心下拉刷新位置是0的情况，用户使用下拉刷新分为两种，一个是未滚动滚动条就刷新，那么位置就是0，可以实现，另一个是滚动过滚动条之后刷新，那么位置会是0.0003这样的数，与0的效果是一样的

最后让路由每次访问 /HOME 时跳转到元数据存储的位置

视频中返回的是 {x:0,y:0}这种格式，你把savedPostion打印出来，savedPostion是{left:0,top:0}这种格式，由于版本的不同格式会不同，具体使用方式需要看文档