实现效果
点击切换。可移动一个单位
下面我们思考我们的组件使用形式
<base-swiper class="swiper">
<base-swiper-item v-for="item of list" :key="item" :gap="10">
<div class="box">
<div class="content">
<img :src="item" alt="">
</div>
</div>
</base-swiper-item>
</base-swiper>
可以看到我们的swiper组件必须是成套使用的。在swiper-item里面设置一个slot
轮播图的实现存在的问题。
1、我们怎么才能确定处理swiper跟swiper-item的关系,也就是。我们怎么才能确定swiper跟swiper-item的关系。
2、怎么实现轮播图移动
3、怎么实现轮播图的无缝切换
4、轮播图移动不协调问题
解决方式
1、使用Vue的 p a r e n t 跟 parent跟 paren