Swiper组件的问题

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

安装问题

注意:

  1. 在安装插件前,要先安装Swiper(cnpm install swiper)
  2. 在安装插件时,不要直接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)
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值