vue2使用vue-awesome-swiper踩坑笔记_vue2 vue-awesome-swiper

版本选择：

截止目前vue-awesome-swiper最新版为4.1.1

vue-awesome-swiper项目已被弃用并被Swiper Vue 组件取代

Swiper Vue 组件可能会在未来版本中被删除。建议迁移到Swiper Element。

所以说，不是非必要的情况建议直接使用Swiper Element。

vue-awesome-swiper具体可看官方github

没有特殊需求建议选择较新的版本，2.x版本过于老旧不建议使用了

此次笔记只记录vue-awesome-swiper

3.x版本：

基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

如果需要回退到 Swiper3，请使用 v2.6.7 版本。

安装

npm install vue-awesome-swiper --save

全局引用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

按需引用

// require styles
import 'swiper/dist/css/swiper.css'
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

 4.x版本：

4.x版本相对稳定，建议使用，但对ie不是很友好

安装

npm install swiper vue-awesome-swiper --save
 
# or
yarn add swiper vue-awesome-swiper

全局引用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

按需引用

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

关于CSS引用

vue-awesome-swiper本身不带有css样式

下面是官方给出的地址

//3.x
 
import 'swiper/dist/css/swiper.css'
 
//4.x
import 'swiper/css/swiper.css'

但是实际上需要单独安装swiper，而且不同版本的css地址不一致，下面是我使用过的两个不同版本的地址，如果是其他版本需要到node_modules中找一下具体的位置

//11.0.5
import 'swiper/swiper.css'
 
//5.4.5
import 'swiper/css/swiper.css'

IE浏览的兼容问题

研究了半天没有找到有效的解决办法，降版本吧！或者有大佬知道求教！

经测试3.1.3是可以兼容IE的

（切换版本之后一定要重启服务，可以避免很多奇怪的问题！！）

使用多个组件时相互干扰问题

pagination元素命名一定要区分开！！

<swiper :options="swiperOptions" ref="mySwiper" >
...
</swiper>

	export default {
		data() {
			return {
				swiperOptions: {
					pagination: {
						el: '.swiper-pagination', //使用多个组件时一定要区分！！！
						clickable: true // 可点击分页器切换
					},
 
				}
 
			}
		}
	}

后面有新的发现会继续补充，个人建议：IE赶紧毁灭吧！！