nuxt使用vue-awesome-swipe轮播

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.在组件中使用

  

              

                  

                    

                      

                    

                  

                  

              

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

你可能感兴趣的:(nuxt使用vue-awesome-swipe轮播)