Swiper6的基本使用

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

Swiper6

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

Use Swiper from npm

• 下载(默认为最新版本，此文为6)
  npm install swiper --save

• 引用 （1号坑）

import Swiper, { Pagination, Navigation, Autoplay } from 'swiper' // js 模块
import 'swiper/swiper-bundle.css' // css 模块
Swiper.use([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号坑解释

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

var swiper = new Swiper(....

2. 又警告 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='loopList.length'-->
<swiper :key='loopList.length'>
   <div class='swiper-slide slide' v-for='data in loopList' :key="data.id">
     <img :src="data.img | 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 data.replace('w.h', '400.160')
   }
 },
 mounted () {
   axios.get(‘XXXXXX这里写请求的地址Xxxx’)
     .then(res => {
       this.loopList = res.data.movieList
     }).catch(err => {
       console.log(err)
     })
 }
}

---

Use Swiper from CDN

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

---

Use ES modules in browser

<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'

  const swiper = new Swiper(...)
</script>

写在最后

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