vue中使用swiper，vue-awesome-swiper

最新推荐文章于 2025-05-31 20:13:02 发布

inticaler

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue swipe

本文链接：https://blog.youkuaiyun.com/MICHAEL_PRINCE/article/details/117654376

vue.js 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了在Vue项目中遇到Swiper6版本问题，如分页器不显示等，通过降级到Swiper5.4.5并使用vue-awesome-swiper来解决。同时，提供了全局和局部注册Swiper的方法，并展示了如何在模板中使用Swiper组件。文章还详细解释了如何根据浏览器宽度动态修改slidesPerView，并利用v-if进行重新渲染，以实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://github.com/surmon-china/vue-awesome-swiper

在刚开始vue中使用swiper的时候，按照文档默认下载的是swiper6，这个版本有很多坑，比如分页器不显示等，因此查了很多资料，得到以下解决方案：

1.降低swiper的版本，并安装vue-awesome-swiper

2.输入命令： npm install vue-awesome-swiper swiper@5.4.5 --save 命令完成后我们查看依赖包发现swiper版本已经为5.4.5的了，接下来正常引入就可以了

3.1 全局注册

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3.2 局部注册

import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

3.3 添加组件模板

<template>
  <div class="hello">
    <swiper ref="mySwiper" :options="swiperOptions" v-if="isShow">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },
        initialSlide: 0,
        slidesPerView: 3,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    console.log('Current Swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
    this.handleClient()
    // 根据浏览器的大小动态修改slidesPerView的值，并重新渲染
    window.onresize = () => {
      return (() => {
        console.log(document.body.clientWidth)
        this.handleClient()
      })()
    }
  },
  methods: {
    handleClient () {
      if (document.body.clientWidth > 900) {
        this.changeSlidesPerView(3)
      } else if (document.body.clientWidth <= 900 && document.body.clientWidth > 600) {
        this.changeSlidesPerView(2)
      } else if (document.body.clientWidth <= 600) {
        this.changeSlidesPerView(1)
      }
    },
    changeSlidesPerView (num) {
      this.swiperOptions.slidesPerView = num
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  }
}
</script>

4. 到此，在vue中使用swiper就可以正常显示了。

5. 如果需要根据浏览器宽度动态修改 slidesPerView 的数值，会遇到变量修改，但是页面无效果的情况，是因为swiper没有更新，这里的解决方案是使用v-if来先销毁，再重新渲染。