前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取

目录

1-轮播图模块数据开发

2-floor组件开发

3-抽取全局轮播图组件


1-轮播图模块数据开发
 

轮播图需要用到swiper插件,先安装5.4.5版本的swiper:
npm  install --save swiper@^5.4.5 --force

模拟从服务器获取数据;
1-编写mockRequests的js文件和之前编写的request的js文件类似,就修改一下baseURL,我们模拟的数据请求路径约定为/mock开头
前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第1张图片

2-src/api/index.js中引入mockRequest.js并且对外保留方法

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第2张图片

3-找到对应的组件/页面,在页面加载过程中派发action获取轮播图数据

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第3张图片

4-因为轮播图在home模块,所以去store/home去真正获取数据,存取数据

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第4张图片

5-组件页面数据获取,循环遍历数据

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第5张图片

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第6张图片

6-swiper组件的使用
安装swiper插件:npm  install --save swiper@^5.4.5 --force
文件引入src\pages\home\listContainer\index.vue;import Swiper from 'swiper';
main.js中引入样式【因为swiper样式在其他页面/组件也需要使用】,import 'swiper/css/swiper.css';
通过watch+nextTick()函数实现轮播图展示效果
 

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第7张图片

 

 ps:
(1)我们不能将new Swiper放入到mounted中,因为mounted是页面加载完成展示,但是我们是通过axios异步请求服务端获取数据而且还v-for循环获取数据(也要耗时),页面结构没有完全加载完成,会导致轮播图功能显示不全;
(2)所以通过watch+nextTick()实现此功能;
(3) swiper对象里面pagination属性clickable:true,默认是false,点击轮播图下面小圆点实现图片动态展示需要用到这个属性;
(4)document.querySelector(".swiper-container")可以使用ref来代替
...

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第8张图片

 

2-floor组件开发
 

获取floor的数据,
1-api中定义接口请求;2-页面派发action;3-vuex中请求和store数据;4-页面拿到服务端的数据展示;
注意:页面派发action是哪个页面派发?因为home页面需要展示两次,所以只能再home组件发送请求,不能在floor组件发action;home和floor是父子关系;



前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第9张图片

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第10张图片

 

 

home组件中派发action:

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第11张图片

 

home仓库中store数据(floor是home的字组件)

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第12张图片

 

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第13张图片

 

循环遍历数据:

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第14张图片

 

ps:
(1)v-for标签也可以在自定义组件中使用
(2)现在是在home组件中显示两个floor,但是home中的数据需要传输到floor组件中,需要父子组件通讯;
父子组件通讯:
props,

自定义事件:$on,$emit
全局事件总线:$bus 全能
插槽
vuex

父组件中自定义属性list:
前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第15张图片

 

子组件接受父组件的数据:

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第16张图片

 

子组件展示数据:

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第17张图片

 

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第18张图片

 

ps:(1)swiper使用步骤:引入swiper,引入swiper样式,new swiper实例
(2)注意floor轮播图这边,这里在mounted中使用swiper就没有首页banner中的mounted中使用swiper问题;因为floor的mounted中并没有派发action获取数据,floor中的数据都是从父组件home中发起请求传递过来的,所以这里的swiper可以直接使用

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第19张图片

 

3-抽取全局轮播图组件

 

       首页的轮播图再几个地方使用,我们拆分为公用组件(全局组件),注册一次,就可以直接使用。现在在首页的banner在watch中实例化swiper,目前floor中在mounted中实例化swiper;我们先要改造floor中的结构,这样结构类似,我们方便抽取...

全局组件我们都放到src/components/ 文件夹下;







前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第20张图片

 

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第21张图片

 

main.js中注册全局组件:

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第22张图片

 

使用全局组件:

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第23张图片

 

前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取_第24张图片

 

你可能感兴趣的:(前端知识,vue,前端)