Vue关于轮播设计与轮播组件的实现

轮播设计

实现轮播效果，首先需要在页面运用到我们的swiper轮播组件。

<swiper :key="looplist.length">
    <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
        <img :src="data.imgUrl" />
    </div>
</swiper>
    

再封装一个swiper组件

   <template>
        <div :class="swiper-container 用到swiper的名字">
            <div class="swiper-wrapper">
                <slot></slot>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination">
            </div>
        </div>
    </template>

再进行模块化引入 但是前提是安装好了swiper组件库 如果没有安装，请执行以下命令

cnpm install --save swiper

在做引入时，关于下载的swipe