vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

2021-09-05 00:22:33

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件

<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in items">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true,
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
onSlideChangeEnd: swiper => {
//这个位置放swiper的回调方法
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
}
}
}
}
}
</script>
<style>
</style>

码农公寓