ShowEasyFrontEnd/FrontEnd/components/swiper/perColumn.vue

<template>
  <section
    :class="['tw-relative tw-mt-[48px] xl:tw-max-w-[1246px] xl:tw-mx-auto']"
  >
    <div
      class="swiper-container perColumn xl:tw-max-w-[1106px] xl:tw-mx-auto xl:tw-px-[22px]"
      ref="perColumn"
      @mouseenter="enter"
      @mouseleave="leave"
    >
      <div :class="['swiper-wrapper']">
        <div
          v-for="(item, index) in list"
          :key="index"
          :class="['swiper-slide']"
        >
          <div class="tw-rounded-[24px]">
            <lazyImg
              :src="item.image"
              :customClass="'swiper-lazy tw-rounded-[24px]'"
            ></lazyImg>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  import Swiper from "swiper/bundle";
  import lazyImg from "@/components/img/img.vue";
  export default {
    components: {
      Swiper,
      lazyImg,
    },
    props: {
      list: {
        type: Array,
      },
    },
    data() {
      return {
        perColumn: null,
      };
    },
    mounted() {
      let vm = this;
      vm.$nextTick(function () {
        vm.perColumn = new Swiper(".swiper-container.perColumn", {
          direction: "horizontal",
          initialSlide: 0,
          slidesPerView: "auto",
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          spaceBetween: 32,
          lazy: {
            loadPrevNext: true,
            loadOnTransitionStart: true,
            loadPrevNextAmount: 2,
          },
          breakpoints: {
            1366: {
              slidesPerView: 3,
              spaceBetween: 24,
              grabCursor: true,
            },
          },
        });
      });
    },
    methods: {},
  };
</script>
<style lang="scss" scoped>
  .swiper-container {
    width: 100% !important;
  }
</style>