nuxt.js使用swiper

原：https://www.e-learn.cn/content/qita/1232754

由 匿名 (未驗證) 提交於 2019-12-02 22:56:40

版權聲明：在那最初的相遇中，我們都曾經為彼此心動過... https://blog.csdn.net/weixin_36185028/article/details/82946293

1.安裝swiper

 npm install vue-awesome-swiper --save

2.在plugins下新建vue-swiper.js文件

 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr' Vue.use(VueAwesomeSwiper)

3.在nuxt.config.js中引入

 //其他代碼 css:[ { src: "swiper/dist/css/swiper.css" } ], plugins:[ { src: "~/plugins/vue-swiper.js", ssr: false }, ] //其他代碼

4.在頁面中使用舉例

 <template> <!-- You can find this swiper instance object in current component by the "mySwiper" --> <div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="banner in banners"> <img :src="banner"> </div> </div> <div class="swiper-pagination swiper-pagination-bullets"></div> </div> </template> <script> export default { data () { return { banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ], 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); } } } } }, mounted() { console.log('app init', this) setTimeout(() => { this.banners.push('/5.jpg') console.log('banners update') }, 3000) console.log( 'This is current swiper instance object', this.mySwiper, 'I will slideTo banners 3') this.mySwiper.slideTo(3) } } </script> <style lang="scss" scoped> .my-swiper { height: 300px; width: 100%; .swiper-slide { text-align: center; font-size: 38px; font-weight: 700; display: flex; justify-content: center; align-items: center; } .swiper-pagination { > .swiper-pagination-bullet { background-color: red; } } } </style>

參考：https://www.npmjs.com/package/vue-awesome-swiper

 

文章來源:  nuxt.js使用swiper