Day04-尚品汇-Banner实现轮播图第一种解决方案

Day04-尚品汇-Banner实现轮播图第一种解决方案_第1张图片

1.按照swiper插件-----我安装的是版本6

Day04-尚品汇-Banner实现轮播图第一种解决方案_第2张图片

 2.在ListContainer组件里面

Day04-尚品汇-Banner实现轮播图第一种解决方案_第3张图片

3.因为下面也用到了swiper的样式,所以把swiper的样式放在了main.js里面 

Day04-尚品汇-Banner实现轮播图第一种解决方案_第4张图片

4.把从mock那里得到数据,v-for遍历一下

Day04-尚品汇-Banner实现轮播图第一种解决方案_第5张图片

 上面的图片   :src="carousel.imgUrl"    ----这里的imgUrl是从组件哪里看到的即下图

Day04-尚品汇-Banner实现轮播图第一种解决方案_第6张图片

 5.准备一个swiper实例,【我自以为mounted是页面中已经有完整的结构】

Day04-尚品汇-Banner实现轮播图第一种解决方案_第7张图片

 1---2--3--4---5的效果图:

Day04-尚品汇-Banner实现轮播图第一种解决方案_第8张图片

开始分析问题哈:

1.在ListContainer的index.vue里面----观察mounted(我期待的新建swiper实例)啥时候执行

Day04-尚品汇-Banner实现轮播图第一种解决方案_第9张图片

 2.在store文件夹里面的home下的index.js里面也观察执行顺序 

Day04-尚品汇-Banner实现轮播图第一种解决方案_第10张图片

1----2--的效果图:

Day04-尚品汇-Banner实现轮播图第一种解决方案_第11张图片

解决问题

利用定时器但是有瑕疵

(1)在ListContainer的index.vue里面

Day04-尚品汇-Banner实现轮播图第一种解决方案_第12张图片

 (2)加入定时器的效果 

(3)实践看一下效果

Day04-尚品汇-Banner实现轮播图第一种解决方案_第13张图片

 

你可能感兴趣的:(实战,尚品汇,尚品汇)