Vue-----vantUI库

• 1、回顾
• 2、课程
  • 2.1 ui库
  • 2.2 首页导入轮播图
  • 2.3 导入vant ui库
  • 2.4 首页面实现下拉刷新以及上拉加载
  • 2.5 vant ui 库实现上拉加载以及下拉刷新

1、回顾

用户中心嵌套路由 底部的颜色 失效

router.js App.vue Footer.vue

但是输入 http://localhost:8080/ 时，什么都不显示了 ---- 重定向 / ----》 /home

2、课程

2.1 ui库

PC端项目
iview
element-ui

移动端
mint-ui
vant

以mint-ui为例

cnpm / npm i mint-ui -S

2.2 首页导入轮播图

填充真实的图片

请求数据

填充数据

修改样式

以iphone5为基础 先写效果，可以修改lib/base.scss文件的normal为scaling查看效果

2.3 导入vant ui库

cnpm / npm i vant -S

导入全部的组件（一般不推荐）

按需加载（推荐）

cnpm i babel-plugin-import -D

用户中心的按钮

返回上一页

this.$router.go(-1)

2.4 首页面实现下拉刷新以及上拉加载

需要使用到Mint UI中的Loadmore组件

下拉刷新其实就是加载第一页的数据，上拉加载就是加载下一页的数据

上拉加载加载下一页数据

当你下拉刷新的时候，实际上加载的是第一页的数据，需要对某一些数据重置

2.5 vant ui 库实现上拉加载以及下拉刷新

上拉加载

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

1、引入相关的组件

2、使用组件包裹列表组件

3、初始化数据以及实现加载的函数

4、实现上拉加载的函数 --- 一定不能忘记 页面的自增

下拉刷新

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

1、引入必须的组件

2、、使用组件需要的下拉的组件

3、初始化数据以及实现下拉刷新的函数

4、实现下拉刷新的函数 ---- 重置页码以及说明数据换可以加载

---------------------------------------------------------------------------------------------文章来自吴大勋（大勋说）---------------------------------------------------------------------------------------------