Swiper6入门
vue使用Swiper6
github:awesome-swiper
这次记录主要是记录swiper6的使用，网上多是以前的版本，但是好像vue3可以直接使用swiper6，
不需要这个大佬的awesome插件了，所以就有了很多问题。
其中的重点是组件使用的是大佬的组件，原因就是swiper/vue下找不到这些组件，然后参数类也是用的options来传参，但是事件都是直接绑定到swiper上。通过ref来访问实例。
- 局部使用：
<template>
<div>
<swiper ref="mySwiper" :options="swiperOptions" @swiper="onSwiper" @click="gg"
@slideChange="onSlideChange">
<swiper-slide><img src="../assets/img/1.jpg" alt=""></swiper-slide>
<swiper-slide><img src="../assets/img/2.jpg" alt=""></swiper-slide>
<swiper-slide><img src="../assets/img/3.jpg" alt=""></swiper-slide>
</swiper>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
// Import Swiper Vue.js components
import 'swiper/swiper-bundle.min.css' 导入样式
import {
Swiper,
SwiperSlide,
} from 'vue-awesome-swiper'; 使用大佬包装的组件
import SwiperCore, { 使用swiper6的模组扩展
Autoplay,
Navigation
} from 'swiper';
// Import Swiper styles
SwiperCore.use([Navigation, Autoplay]); 注册模块
export default {
data() {
return {
swiperOptions: {
slidesPerView: 3,
grabCursor:true,
spaceBetween: 50,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
}
}
},
components: {
Swiper,
SwiperSlide,
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
methods: {
onSwiper(swiper) {
console.log(swiper)
},
onSlideChange() {
console.log('slide change');
},
gg(){
console.log('click');
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
};
</script>
- 全局使用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper' 导入两个组件
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.min.css' 使用样式
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';导入模组
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);使用模组
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)全局注册插件
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
swiperOptions:是参数的重点。
