首页轮播图插件一般有swiper和mint-ui两个，这里主要讲解swiper，一般市配置，结构，样式，导出对象
其中，挨着body的意思是要在界面渲染完成后，在进行初始化，因为js是通过选择渲染好的组件，修改组件，所以对应到vue中，是在mounted生命周期方法内完成
1 基于网页的轮播图
- 检索swiper使用说明，确定html结构
- 修改slide嵌套的内容
- 下载swiper
npm i swiper -S - 导入swiper
- 导入对应的css文件
- 在mounted中给渲染好的组件绑定对象配置方法
-
查找pagination-bullet的类名
![]()
- 由于swiper4.0x的默认样式不能在scoped中覆盖
要在下面新建一个scoped覆盖原有的paginantion样式 -
在index中导入组件并注册使用
![]()
![]()
![]()
![]()
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并注册
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
