nuxt.js使用swiper

╰+攻爆jí腚メ 2022-05-09 09:34 693阅读 0赞

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>
      
      <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;
          background-color: #eee;
          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][https_www.npmjs.com_package_vue-awesome-swiper]

[https_www.npmjs.com_package_vue-awesome-swiper]: https://www.npmjs.com/package/vue-awesome-swiper