Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)

 

当从home组件跳转到search时,TypeNav组件隐藏

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第1张图片 

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第2张图片

修改、添加 leaveShow enterShow方法

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第3张图片Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第4张图片

 增加过渡动画:

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第5张图片 

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第6张图片

 

只要用到TypeNav组件,就会想服务器发送请求categoryList,并且由于home和search组件中都用到了TypeNav,所以在二者切换过程中,即home组件销毁,search组件出现,不断的发送请求,因此进行性能优化。

那如何只发一次请求呢?将派发的categoryList请求放在根组件app.vue的mounted里面

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第7张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第8张图片

合并参数? 

 

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第9张图片Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第10张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第11张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第12张图片 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第13张图片

 接下来在listContainer组件里面,向mock发送请求,获取数据,存储在仓库中

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第14张图片

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第15张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第16张图片

listContainer组件获取数据

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第17张图片

  swiper的基本使用Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第18张图片

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第19张图片

第一步:main.js中引入swiper样式,因为轮播图的样式在home中两个地方都用了且是一样的

 

 listConstainer--index.vue中引入swiper

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第20张图片

 第二步:从仓库中获取四张图片Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第21张图片

 第三步:new一个swiper实例,动态展示数据,注意这一步很关键,到底在哪个位置newSwiper实例,在mounted里面newSwiper实例是错误的,因为dispatch里面涉及到异步语句,导致v-for遍历的时候结构还没有完全渲染好,因此不行。

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第22张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第23张图片

使用定时器可以粗糙的解决 

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第24张图片

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第25张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第26张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第27张图片

 

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第28张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第29张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第30张图片

 发送请求,并获取数据成功Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第31张图片

 再home组件中从仓库拿到数据

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第32张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第33张图片 

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第34张图片

 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第35张图片

利用props进行组件间通信

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第36张图片

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第37张图片

 通信成功,floor组件中有listVue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第38张图片

 下面在floor组件中动态展示数据,先要弄清楚数据结构

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第39张图片 Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第40张图片

navList 数据动态展示

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第41张图片 

 先统一用法,修改一下和home组件的轮播图用法一致Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第42张图片

 接下来,拆分成全局组件Carousel

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第43张图片Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第44张图片

在main.js中注册全局组件Carousel

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第45张图片 在floor组件中使用Carousel组件Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第46张图片

 相同的listContainer里面,使用Carousel组件,删除原有的轮播图结构、还有swiper引入

Vue项目实战-尚品汇--mock模拟数据 swiper插件实现banner轮播图(四)_第47张图片

 到此为止:home模块开发完毕。。。。。接下来是search模块的开发。。。。。

你可能感兴趣的:(vue.js,前端,javascript)