vue3 + swiper 实现卡片效果切换

置顶 qingzhen568

已于 2023-02-22 14:29:54 修改

阅读量2.1k

点赞数 1

分类专栏： swiper js js库文章标签： javascript vue.js 前端

于 2023-02-21 15:56:02 首次发布

本文链接：https://blog.csdn.net/weixin_43919509/article/details/129144329

版权

js 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

js库

2 篇文章 0 订阅

订阅专栏

swiper

1 篇文章 0 订阅

订阅专栏

swiper官网：https://swiperjs.com

npm i swiper

<template>
  <swiper
    :style="{ height: swiperHeight }"
    direction="vertical"
    :grabCursor="true"
    :effect="'creative'"
    :creativeEffect="{
      prev: {
        shadow: true,
        translate: [0, '-120%', -500],
      },
      next: {
        shadow: true,
        translate: [0, '120%', -500],
      },
    }"
    :modules="modules"
    :observer="true"
    :observeParents="true"
    :loop="false"
    :autoplay="false"
    :autoplayDisableOnInteraction="false"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    @touch-end="touchEnd"
  >
    <swiper-slide :class="isExp ? '' : 'swiper-no-swiping'">
      <div class="content">Slide 1</div>
    </swiper-slide>
    <swiper-slide>
      <div class="content">Slide 2</div>
    </swiper-slide>
    <swiper-slide>
      <div class="content">Slide 3</div>
    </swiper-slide>
    <swiper-slide>
      <div class="content">Slide 4</div>
    </swiper-slide>
    <swiper-slide>
      <div class="content">Slide 5</div>
    </swiper-slide>
  </swiper>
</template>

<script setup lang="ts">
import { EffectCreative } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper-bundle.min.css"; // 所有样式
import { ref } from "@vue/reactivity";

// Import Swiper styles
// import "swiper/swiper.css";

// import required modules
const modules = [EffectCreative];
const swiperRef = ref();
const swiperIndex = ref(0);
const swiperHeight = ref("300px"); // 自定义轮播图高度

const onSwiper = (swiper: any) => {
  swiperRef.value = swiper;
};
const onSlideChange = (swiper: any) => {
  console.log("slide change swiper.realIndex;", swiper.realIndex);
  console.log("slide change swiper.previousIndex;", swiper.previousIndex);
  swiperIndex.value = swiper.realIndex;
};
const touchEnd = (swiper: any) => {
  setTimeout(() => {
    if (swiper.realIndex === 4) {
      console.log("The End :>> ");
    }
  }, 200);
};
// 点击滑动到下一个
const getNextFn = () => {
  swiperRef.value.slideTo(swiperIndex.value + 1, 1000, false);
};
</script>

<style scoped>
.swiper {
  margin: 100px auto;
  width: 320px;
  height: 240px;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.swiper-slide:nth-child(1n) {
  background-color: rgb(206, 17, 17);
}

.swiper-slide:nth-child(2n) {
  background-color: rgb(0, 140, 255);
}

.swiper-slide:nth-child(3n) {
  background-color: rgb(10, 184, 111);
}
</style>

遇到的问题：

Q：某些区域无法正常滑动？
A：原因是，滑块包裹的内容超过swiper容器高度导致，给容器设置高度，如例子 :style=“{ height: swiperHeight }”
Q：整体区域头尾都能正常切换滑动，但是中间有部分区域无法滑动？
A: 原因可能是因为该区域内容抽离为组件，跟swiper不在同一个组件中导致的，可试试改为同一组件。
3: 禁止页面滑动？
A: 给页面添加类名 ‘swiper-no-swiping’，即可