10-首页轮播图

首页轮播图插件一般有swiper和mint-ui两个，这里主要讲解swiper，一般市配置，结构，样式，导出对象

• https://www.swiper.com.cn/usage/index.html
  
  

  轮播图的组成.png
  
  
  

  轮播图的初始化.png

其中，挨着body的意思是要在界面渲染完成后，在进行初始化，因为js是通过选择渲染好的组件，修改组件，所以对应到vue中，是在mounted生命周期方法内完成

1 基于网页的轮播图

• 检索swiper使用说明，确定html结构
• 修改slide嵌套的内容
• 下载swiper
  npm i swiper -S
• 导入swiper
• 导入对应的css文件
• 在mounted中给渲染好的组件绑定对象配置方法

• 查找pagination-bullet的类名

  
  
  

  image.png
• 由于swiper4.0x的默认样式不能在scoped中覆盖
  要在下面新建一个scoped覆盖原有的paginantion样式

• 在index中导入组件并注册使用

  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png

2 基于json格式数据请求的轮播图

• 添加api/index中的getHome方法
• 添加state中的homeInfo:{}对象
• 添加mutation-type中的修改首页数据方法名
• 添加mutatiaons中的DEFAULT_HOME方法名
• 添加actions中的requestHome方法
• 在pages/index/index中的created生命周期函数中请求数据
• 在pages/index/children/banner的computed中获取state数据
• 在banner组件中渲染获取的数据

• 在main.js中导入store并注册

  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png
  
  
  

  image.png