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

最新推荐文章于 2024-07-22 15:42:11 发布

Andrew_SJ

最新推荐文章于 2024-07-22 15:42:11 发布

阅读量810

点赞数 2

分类专栏：前端文章标签： vue swiper

本文链接：https://blog.csdn.net/Andrew_SJ/article/details/118605147

版权

本文详细介绍了如何在Vue3和TypeScript环境中安装并使用swiper6，包括遇到的坑和解决方案。在vue3+ts的项目中，可以直接引用swiper6，因为它包含了类型定义文件，无需特殊处理。关键点在于按需引入所需功能，正确注册组件如Navigation，并解决页面分隔和组件注册的问题。

摘要由CSDN通过智能技术生成

原文链接：
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="" /