Vue微型项目（九）——轮播图+上拉加载、下拉刷新+回到顶部

同样，我们再来看下到目前为止，我的项目已经实现的效果，基本布局已经实现，也实现了基本页面之间的跳转，但是现在最大的不足有，在地址栏中必须要输入localhost:8080/user/nologin 或者 localhost:8080/user/loging， 才能够跳转到我们想要去往的页面，这显然是不现实的。

---

那么接下来，我们要实现的是首页的轮播图模块，一起来看下如何实现，期间又会有哪些技术点，又会遇到哪些坑呢？

一. 理解vant ui库

这边有一个vant 库的文档 https://youzan.github.io/vant/#/zh-CN/intro， 我们实现的轮播图效果是采用该API中的 Swipe轮播 插件

1. 安装

这里，要Ctrl+C 中断原来项目的执行，进行 vant 的安装，cnpm i vant -S，这里还是优先选用 cnpm 进行安装

2. 引入组件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

3. 还需要安装 babel组件，安装命令是 cnpm i babel-plugin-import -D

4. 插入轮播图

在 src/views/home/index.vue 文件中，添加轮播图 的代码，其中，要在 template 部分加上 .banner 部分。按照官方文档，添加代码如下，

实现的效果为，

5. 请求数据，更换轮播图图片

此时，轮播图的图片能够正常显示，但是我下一步要做的是将轮播图的2张图片替换掉，改为向服务器端口请求数据，然后进行渲染，代码如下，
第一步，添加初始化数据

第二步，请求数据

填充数据

修改样式

实现效果

二. 理解mint ui库

这里，仍旧有一个官方文档地址 http://mint-ui.github.io/#!/zh-cn ，在里面也可以找到swipe轮播图 插件。

• 安装命令 cnpm install mint-ui -S
  
  首页导入轮播图
  
  
  
  请求数据
  
  
  填充数据
  
  修改样式
  
  在这个项目中，我主要使用vent ui库实现了轮播图模块

三. 首页实现上拉加载

参考官方文档，https://youzan.github.io/vant/#/zh-CN/list

1. 引入

注意：这几句写完之后，一定要重启服务器，不然样式不会生效

2. 代码演示

3. 实现的效果是，

四. 首页面实现下拉刷新

参考官方文档，https://youzan.github.io/vant/#/zh-CN/pull-refresh

下拉刷新，添加了 ==onRefresh()==方法，请求的数据还是首页的数据，所以在这里，还要再次请求douban的数据，和首页请求的数据是一样的。

1. 引入

2. 代码演示

3. 实现效果

五. 回到顶部

回到顶部 逻辑 与 布局 相关，在本案例中使用的是弹性盒布局， 可以滚动的区域是 内容区域，所有的一切都要基于内容区域（获取滚动的高度要基于内容区域，不能基于window），组件加载完毕监听 内容区域 滚动事件，离开页面要销毁 内容区域 滚动事件

1. 首先，加 id

2. 使用vant中的 Icon 图标

在vant库中找一个“回到顶部”的小图标

2.1. 引入

2.2. 添加到布局中

2.3. 修改样式

2.4. 添加点击事件

---

总结

到此为止，项目实现的效果基本已经完善。

接下来，我要往完善“个人中心页面”，添加各个表单注册功能，比如注册功能、登录功能，购物车功能，以及详情页面。在接下来的实践中，又会遇到哪些问题，能够达到一种什么样的效果呢？

让我们来一起期待吧