Vue2 or Vue3 or TS 使用最新版本 swiper/vue-awesome-swiper

2023-11-16 13:58:09

原文链接：
https://www.jianshu.com/p/51fa180e6fd6

vue3+ts+swiper6实际验证可行。

安装swiper6:

yarn add swiper

在vue3中使用swiper (原文代码）

我们默认安装的swiper6.0，这个就有一些坑要处理,如下：
1、使用某些功能需要按需引入需要相应的包，如翻页，自动播放等
2、解决了一些同学发现的左右翻页标签，小圆点出不来等问题
3、还无法实现全局引用，都为局部引用

直接上全部代码；本代码为vue3 + ts + swiper6，仔细看代码可以发现，并不需要 swiper 对 ts 进行特殊处理，是因为 swiper6 同时支持了 ts 包含了相应的类型定义文件（xxx.d.ts），所以无论是不是 ts 架构，都可以正常使用
来自：https://www.jianshu.com/p/51fa180e6fd6

<template>
  <div class="home">
    <!-- swiper1 -->
    <div class="title">基本效果-小圆点和左右切换</div>
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../assets/sw1.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/sw2.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/sw3.jpg" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
  </div>

  <!-- swiper2 -->
  <div class="title">切换效果-effect</div>
  <div class="swiper-container swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../assets/sw2.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/sw3.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/sw1.jpg" alt="" />
      </div>
    </div>
  </div>

  <!-- swiper3 -->
  <div class="title">切换效果-cube</div>
  <div class="swiper-container swiper3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../assets/sw3.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/sw1.jpg" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/sw2.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import Swiper, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  Pagination,
  Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);

// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/swiper-bundle.min.css";

// swiper.less/sass/css 决定了基础的样式
import "swiper/swiper.less";

export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    onMounted(() => {
      new Swiper(".swiper1", {
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          hideOnClick: true,
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        on: {
          navigationShow: function () {
            console.log("按钮显示了");
          },
        },
      });

      new Swiper(".swiper2", {
        //循环
        loop: true,
        //每张播放时长3秒，自动播放
        spaceBetween: 25,
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 1.32,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
      });

      new Swiper(".swiper3", {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        effect: "cube",
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
      });
    });
  },
});
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  line-height: 50px;
}

.swiper-slide {
  img {
    width: 100%;
  }
}
</style>

记录一下几个坑：

1）在swiper文档内是直接使用 <swiper-slide></swiper-slide>作为区分页面的，但是不知道为什么我在使用的时候有点问题，因此就和上面代码一样使用<div class=swiper-slide"><div>来分隔页面。
2）此外不能在export default defineComponent中的components: {}中注册swiper组件，而应该使用Swiper.use([Navigation])来注册从swiper中import的Navigation.

<script lang='ts'>
import { defineComponent, onMounted } from 'vue'
import { Swiper, Navigation } from 'swiper';
import 'swiper/swiper.less';
import 'swiper/swiper-bundle.min.css'
Swiper.use( [Navigation])
export default defineComponent({
	name: 'Home',
    components: {
     
    },
    setup() {
        onMounted(() => {
            new Swiper(".swiper-container", {
                direction : 'vertical',
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                    hideOnClick: true,
                }, 
            })
        })
    }
})
</script>

我的代码

<template>
    <div class="wraper w-full swiper-container"> <!--注意外围用swiper-container包裹 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"> <!--一个swiper-slide就是一页 -->
                <div class="p1 h-screen"></div>
            </div>
            <div class="swiper-slide">
                <div class="p2 h-screen"></div>
            </div>
            <div class="swiper-slide">
                <div class="p3 h-screen"></div>
            </div>
            <div class="swiper-slide">
                <div class="p4 h-screen"></div>
            </div>
        <div>
        <div class="swiper-button-prev " ></div>
        <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-next "></div>
        <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { Swiper, Navigation } from 'swiper'; // 引入Swiper和Navigation(上一页/下一页箭头)
import 'swiper/swiper.less';
import 'swiper/swiper-bundle.min.css'
Swiper.use( [Navigation]) // 使用Navigation
export default defineComponent({
	name: 'Home',
    components: {
     
    },
    setup() {
        onMounted(() => {
            // 注意要配置swiper的一些属性的话，需要在此处修改
            new Swiper(".swiper-container", {
                direction : 'vertical',  // 设置swiper为纵向滑动
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                    hideOnClick: true,
                }, 
            })
        })
    }
})
</script>


<style lang="less" scoped>
    .swiper-button-prev { /* 注意修改翻页按钮的样式的话使用单独样式，如果使用tailwindcss的话有一些属性无法修改 */
        color: transparent; /* 默认蓝色箭头无法取消，给它设置透明色 */
        width: 45px;
        background-image: url("xxx.png"); 
        background-size: 100%;
        border-radius: 45px;
        position: absolute;
        top: 78%;
        left: 85%;  
    }
    .swiper-button-next {
        color: transparent;
        width: 45px;
        background-image: url("xxx.pmg");
        background-size: 100%;
        border-radius: 45px;
        position: absolute;
        top: 85%;
        left: 85%; 
    }
</style>

码农公寓

相关文章