首页添加轮播图

使用UI库 – 别人写好的组件库，拿来用

PC
element-ui / iview / ant-design-vue
移动
mint-ui / vant
电商类型的项目建议使用 vant
如何使用UI库 — 快速上手

安装UI库

cnpm i vant -S

按需加载

cnpm i babel-plugin-import -D

babel.config.js 中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

在这里插入图片描述
修改了配置文件，一定要记得重新启动项目

首页添加轮播图
封装轮播图数据请求方法
首页页面设置初始化数据，请求数据，修改数据

getBannerlist().then(res => {
    if (res.data.code === '200') {
       this.bannerlist = res.data.data
     }
 })

页面渲染轮播图（vant轮播图）
图片的展示不是那么的完美（vant加强版image）
使用UI库提供的增强版的图片
- 图片的懒加载
  原理：
  先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。
  
  这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。

在这里插入图片描述

修改首页的头部（vant NavBar导航栏）

在这里插入图片描述

修改首页头部中为搜索框

首页中完成上拉加载

检测滚动条触底事件，执行下一页的请求数据，数据的拼接

使用UI库组件 List 列表

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

在这里插入图片描述