由于大轮播图和小轮播的结构样式完全一样,所以可以抽象成一个公共组件。
新建Carousel文件夹,轮播组件放在这里。
需要解决的问题1:小轮播和大轮播的new Swiper创建的位置不同,需要统一
小轮播也可以放在监视属性里,但是由于floorList不会发生改变,所以需要immediate:true(大轮播加上这个也可以,不会影响效果)
所以floorList.vue 中的new Swiper最终写在监视属性里:
需要解决的问题2:传数据
需要根据轮播图片信息构建轮播结构(几张轮播图)因此在使用轮播组件时需要传入轮播数据。
大轮播文件ListContainer.vue里:
小轮播文件floor.vue: