0
点赞
收藏
分享

微信扫一扫

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

止止_8fc8 2022-01-09 阅读 64

 

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

 

修改、添加 leaveShow enterShow方法

 增加过渡动画:

  

 

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

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

合并参数? 

 

 

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

 

listContainer组件获取数据

  swiper的基本使用

 

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

 

 listConstainer--index.vue中引入swiper

 第二步:从仓库中获取四张图片

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

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

 

 

 

 发送请求,并获取数据成功

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

 

 

 

利用props进行组件间通信

 通信成功,floor组件中有list

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

 

navList 数据动态展示

 

 先统一用法,修改一下和home组件的轮播图用法一致

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

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

 在floor组件中使用Carousel组件

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

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

举报

相关推荐

0 条评论