1.在plugins中定义一个vue-awesome-swipe.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
2.在nuxt.config.js中定义下使用
css: [
'@/assets/css/reset.css',
'swiper/dist/css/swiper.css',
]，
plugins: [
{ src: "@/plugins/element-ui", ssr: true },
{ src: "@/plugins/vue-awesome-swiper", ssr: false }
],
3.在组件中使用
<!-- swiper -->
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(banner) in noticeBanners" :key="banner.linkUrl">
<a :href="banner.linkUrl"><img :src="banner.pictureUrl" :alt="banner.description"></a>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
swiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
on: {
slideChange() {
console.log('onSlideChangeEnd', this);
},
tap() {
console.log('onTap', this);
}
}
},
over
