Swiper组件的问题

最新推荐文章于 2024-06-26 11:03:09 发布

英年早秃小老弟

最新推荐文章于 2024-06-26 11:03:09 发布

阅读量431

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43902528/article/details/107252212

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用vue-awesome-swiper时的问题

安装问题

注意：

在安装插件前，要先安装Swiper(cnpm install swiper)
在安装插件时，不要直接cnpm install vue-awesome-swiper --s，这样会下载最高版本，应该下载cnpm install vue-awesome-swiper@3.1.3 --s这样后面加版本号。如果是最新版会出现很多问题，如分页器无效。

分页器的显示

一般是上面的版本问题，再就是配置的问题

pagination : '.swiper-pagination',
paginationClickable :true,
//或者
pagination: {
    el: '.swiper-pagination',
 },

官方文档1
官方文档2

导入问题

导入要做的是：
1.在main.js里面导入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import '@/styles/swiper.css'
Vue.use(VueAwesomeSwiper)

2.在相应的文件中导入

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

报错Unknown custom element: 错误

一般是导入的时候字母大小写的问题，有时候要大写，有时候要小写。

import {swiper, swiperSlide} from 'vue-awesome-swiper'
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'

在使用Swiper组件的时候，有时候会出现轮播图自动播放过程中出现白页，有几页轮播图就会出现几页白页，在一段不短的时间后突然闪一下变成了正常轮播图内容，就此循环。

解决方法：
在创建Swiper的时候，将Swiper创建的函数放入setTimeout方法中，延迟一秒创建，就可以解决。

mounted () {
    setTimeout(function () {
      // 创建一个轮播实例
    // eslint-disable-next-line no-new
      new Swiper('.swiper-container', {
        slidesPerView: 5,
        slidesPerGroup: 1,
        loop: true,
        speed: 500,
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 2000, disableOnInteraction: false },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      // 如果需要分页器
      })
    }, 1000)
  },