Vue中使用Swiper简单封装组件

Swiper的最简单使用，参考官网教程

但通常情况下，<swiper-slide></swiper-slide>作为循环展示的内容，需要能够展示多种样式的循环列表，此时必须要使用slot

需要封装的Swiper组件命名为MySwiper.vue，代码如下
loop表示是否循环展示，值为false时会来回切换，相当魔性
autoplay是否自动循环展示，值为false时不会自动循环，delay为每页停留的时间

需要循环的部分<swiper-slide>，其中应当包含的内容就是需要循环展示的自定义组件，使用slot插槽占位

在调用时，首先从父组件获取数据showList，传至子组件MySwiper，MySwiper中<swiper-slide>循环若干次，也就生成了若干的slot，在调用slot的时候，绑定名为item的attribute，在父组件中可以通过v-slot接受，参数起名为slotProps，b包含所有slot中传输的attribute，此处包含传输的item。

参考vue官网作用域插槽

<template>
    <div class="swiper-display">
        <swiper
            :modules="modules"
            :slides-per-view="1"
            :space-between="50"
            navigation
            :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            loop
            autoplay="{
              delay: 2000
            }"
        >
            <swiper-slide class="swiper-item" v-for="item in list" :key="item.seq">
                <slot :item="item"></slot>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { onMounted } from 'vue';
import 'swiper/css';

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    props: {
        list: Array
    },
    setup(props) {
        const onSwiper = (swiper) => {
            // console.log(swiper);
        };
        const onSlideChange = () => {
            // console.log('slide change');
        };
        return {
            onSwiper,
            onSlideChange,
            modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
            autoPlay
        };
    },
    
}
</script>

<style lang="scss">
.swiper-display {
    width: 100%;
    height: 100%;
    position: relative;
    .swiper {
        height: 100%;
        .swiper-wrapper {
            height: 100%;
            .swiper-item {
                height: 100%;
            }
        }
    }
}

</style>

使用方式如下，其中ToDisplay表示需要利用Swiper展示的自定义组件

<MySwiper v-slot="slotProps" :list="showList">
  <ToDisplay :item="slotProps.item"></ToDisplay>
</MySwiper>

此外，需要注意css的设置。
<swiper-slide>中，如果直接写html内容，例如div之流，swiper-slide的高度可以被正常撑开。但如果写成一个封装组件，swiper-slide的高度会渲染为0，导致内容显示为空。

此处有两个解决方案：

1. 设置swiper-slide的高度。虽然可以解决，但通用性较差，如果能确保所有Swiper高度相同，可以考虑。但需要注意min-height是无效的，不会随着填充的内容高度增加而增加，相当于是一个固定值

2. 将父元素逐个设置为100%，虽然有点傻，但能较好地适应Swiper中内容高度不同的情况

.swiper-display {
    width: 100%;
    height: 100%;
    position: relative;
    .swiper {
        height: 100%;
        .swiper-wrapper {
            height: 100%;
            .swiper-item {
                height: 100%;
            }
        }
    }