Example of simple package component using Swiper in Vue

text

The easiest use of Swiper, referenceOfficial website tutorial

But usually,<swiper-slide></swiper-slide>As the content of the loop display, a loop list with multiple styles is required. At this time, it must be usedslot

Need to be encapsulatedSwiperThe component is named, the code is as follows

loopIndicates whether the display is displayed in a loop, the value isfalseIt will switch back and forth, which is quite magical
autoplayWhether to automatically cycle, it will not automatically cycle when the value is false.delayThe time to stay per page

The part that needs to be looped<swiper-slide>, the content that should be included is a custom component that needs to be displayed loopfully, usingslotSlot placeholder

When calling, first get data from the parent componentshowList, to subcomponentMySwiper，MySwipermiddle<swiper-slide>Several cycles are generatedslot, invokingslotWhen binding an attribute named item, it can be passed in the parent componentv-slotAccept, the parameter name isslotProps,b contains the attributes transmitted in all slots, here the item transmitted.

Scope slots

Refer to vue official website scope slot

<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="">
                <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) => {
            // (swiper);
        };
        const onSlideChange = () => {
            // ('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>

How to use it is as follows, whereToDisplayIt means that it needs to be usedSwiperCustom components displayed

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

In addition, you need to pay attention to the settings of css.
<swiper-slide>If written directlyhtmlContent, e.g.divThe flow,swiper-slideThe height can be stretched normally. But if written as an encapsulation component,swiper-slideThe height of the 0 renders to 0, causing the content to appear empty.

Here are two solutions:

• set upswiper-slideheight. Although it can be solved, it is poor in versatility, if allSwiperThe height is the same, you can consider it. But attention is neededmin-heightIt is invalid and will not increase as the content height of the fill increases, which is equivalent to a fixed value
• Setting the parent elements to 100% one by one is a bit stupid, but it can adapt betterSwiperThe contents are highly different

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

The above is the detailed content of the example of using Swiper simple encapsulation components in Vue. For more information about Vue Swiper encapsulation components, please follow my other related articles!