当从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模块的开发。。。。。