版本选择:
截止目前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赶紧毁灭吧!!