Swiper6的基本使用

时间：2025-04-07 17:12:54

好久不用Swiper今天使用一下，发现竟然更新到6了，然后就开始了各种坑，避坑指南，给自己以后使用作参考。
俗话说：好记性不如烂笔头。

Swiper6

出现坑的最大原因是：
1.在第六版导入只能导入swiper核心内容，而部分组件效果如分页器需要单独导入
引用已经与5 的版本不同，css的样式已经不在dist中了

Use Swiper from npm
  • 下载(默认为最新版本，此文为6)
    npm install swiper --save
  • 引用 （1号坑）
import Swiper, { Pagination, Navigation, Autoplay } from 'swiper' // js 模块
import 'swiper/' // css 模块
([Pagination, Navigation, Autoplay])
  • html部分
    filmswiper 
<div class="swiper-container filmswiper">
        <div class="swiper-wrapper">
            <slot></slot>//此处写了插槽
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
  • swiper初始化（2号坑）
    filmswiper 是自己起的名字 用于区别组件，这例子就是基本使用，需要继续优化才能成为一个真正的组件 
 mounted () {
    // eslint-disable-next-line no-unused-vars
   const swiper = new Swiper('.filmswiper', {
      // direction: 'vertical',
      loop: true,
      centeredSlides: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true // 允许分页点击跳转
      },

      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },

      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })
  }
2号坑解释

下 直接new 报错 Do not use ‘new’ for side effects no-new
传给变量

var swiper = new Swiper(....
  1. 又警告 Swiper 从没被使用过
    new 上一行写 /* eslint-disable no-new */ 绕过```
/* eslint-disable no-new */

可以将上面看做是一个组件页面，下面在另一个页面引用

  • 引用
// 这里写自己正确的路径
import swiper from '@/views/Film/Swiper'
  • 注册组件(局部组件)
components: {
   swiper
 },
  • 页面中使用(模拟接口中调用的数据)（3号坑）
  • 此处有小伙伴评论：调用后出不来 小圆点，也不能自动轮播，
  • 原因可能是你没加 class='swiper-slide'这也是swiper的结构
<!-- 解决 swiper 初始化过早的问题  :key=''-->
<swiper :key=''>
   <div class='swiper-slide slide' v-for='data in loopList' :key="">
     <img :src=" | filterImg"/>
   </div>
</swiper>
  • script 部分
<script>
import swiper from '@/views/Film/Swiper'
import axios from 'axios'
export default {
 components: {
   swiper
 },
 data () {
   return {
     loopList: []
   }
 },
 filters: {
   filterImg: (data) => {
     return ('', '400.160')
   }
 },
 mounted () {
   (‘XXXXXX这里写请求的地址Xxxx’)
     .then(res => {
        = 
     }).catch(err => {
       (err)
     })
 }
}
Use Swiper from CDN
<link rel="stylesheet" href="/swiper/">
<link rel="stylesheet" href="/swiper/">

<script src="/swiper/"></script>
<script src="/swiper/"></script>
Use ES modules in browser
<script type="module">
  import Swiper from '/swiper/'

  const swiper = new Swiper(...)
</script>
写在最后

敲一遍，立马就体会到啦！多动手总是没得错的，今天也要加油噢。

相关文章