安装

npm i swiper@4 -S

引入css文件

import 'swiper/dist/css/swiper.css'

引入swiper文件

文档 https://www.swiper.com.cn/usage/index.html

import Swiper from 'swiper'

使用swiper

文档 https://www.swiper.com.cn/usage/index.html

<div class="swiper-container swiper-container-content">
  <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
  
  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
  <!-- 如果需要滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

文档 https://www.swiper.com.cn/api/start/new.html

<script>
import Swiper from 'swiper'

export default {
  mounted() {
    this.contentSwiper = new Swiper('.swiper-container-content', {
        direction: 'vertical',
        slidesPerView: 'auto',
        loop: true, // 循环模式选项
        freeMode: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        on: {
          touchEnd(swiper, event) {
            if (contentSwiper.translate >= 50) {
              console.log('上一页')
            } else if ( contentSwiper.translate + 50 <= contentSwiper.height - contentSwiper.virtualSize ) {
              console.log('下一页')
            }
          }
        }
      })
  },
}
</script>

更新Swiper，就像重新初始化一样

文档 https://www.swiper.com.cn/api/methods/257.html

this.contentSwiper.update()

控制Swiper切换到指定slide

文档 https://www.swiper.com.cn/api/methods/109.html

this.contentSwiper.slideTo(20, 200, false)