vue中使用swiper,vue-awesome-swiper

本文介绍了在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来先销毁,再重新渲染。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

inticaler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值