nuxt中簡單使用swiper

經過踩坑，打算在nuxt中使用vue-awesome-swiper，本來打算直接用cdn在頁面的head中引入swiper腳本及css文件，然后像在vue單頁項目使用一樣，但是，本地運行一刷新頁面，swiper就失去了作用，不會滑動，自定義的導航點也沒有，（自己又找不到真正的原因）只好用網上提到最多的vue-awesome-swiper來繼續嘗試使用。

1、首先，安裝

npm install vue-awesome-swiper --save

有個報錯：

 

 大致意識是 需要swiper5.2.0版本作為依賴

那就再裝個swiper

npm install swiper --save

 

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

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

 
Vue.use(VueAwesomeSwiper)

3.在nuxt.config.js中配置：

css:[
  { src: "swiper/css/swiper.css" }

], plugins:[ { src: "~/plugins/vue-swiper.js", ssr: false }, ]

在components中創建一個swiperCpt.vue組件

<template>
    <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="banner in banners">
                <img :src="banner.src">
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            banners:[
                {src:"http://kexiepingtaieposter.hoohui.cn/paper_file/15908353622331590835195(1).png",link:""},
                {src:"http://kexiepingtaieposter.hoohui.cn/paper_file/15908353884901590835256(1).jpg",link:""},
            ],
            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(){
    }
}
</script>
<style lang="scss" scoped>
.swiperWrap{
    border:1px solid red;
    .swiper-slide{
        border:1px solid green;
        img{
            width:100%;
            height:100%;
        }
    }
}
</style>

 

在頁面中使用：

import swiperCpt from '~/components/swiperCpt.vue';

components: {
    swiperCpt
 },

<swiperCpt></swiperCpt>

 

 

再封裝個組件，banner由外部傳入

swiperCpt.vue

 

<template>
<div>
    <div v-if="initStatus" v-swiper:mySwiper="swiperOption" :class="cusClass+' swiperWrap swiperBox '+ swpName" >
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="banner in list">
                <a v-if="banner.link" :href="banner.link" target="_blank">
                    <img :src="banner.src">
                </a>
                <img v-else :src="banner.src">
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
</div>
</template>

<script>
export default {
    props:{
        list:{
            //banner數組
            type:Array,
            default:function(){
                return []
            }
        },
        cusClass:{
            //自定義類名
            type:String,
            default:''
        },
        loop:{
            //是否循環
            type:Boolean,
            default:true
        },
        delay:{
            //間隔時間
            type:Number,
            default:3000
        },
        spaceBetween:{
            //兩個惡輪播的間隔
            type:Number,
            default:0
        },
        slidesPerView:{
            //一頁顯示幾個
            type:Number,
            default:1
        },
        paginationType:{
            //導航點類型
            // 'bullets'  圓點（默認）
            // 'fraction'  分式 
            // 'progressbar'  進度條
            // 'custom' 自定義
            type:String,
            default:''
        }
    },
    data(){
        return{
            initStatus:false,//初始化狀態
            swpName:this.roundString(),//swiper的類名
            swiperOption: {},//swiper參數
        }
    },
    mounted(){
        let self = this;
        
        this.$nextTick(()=>{
            this.swiperOption={
                loop: self.loop,
                centeredSlides: true,
                slidesPerView: self.slidesPerView,//一頁顯示幾個
                spaceBetween: self.spaceBetween,//間隔
                autoplay:{//自動輪播
                    delay: self.delay,
                    disableOnInteraction: false,//操作swiper后 自動輪播不會停止
                },
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                    clickable: true,
                    type:self.paginationType?self.paginationType:'bullets'
                },
                on: {
                    slideChange() {
                        console.log('onSlideChangeEnd', this);
                    },
                    tap() {
                        console.log('onTap', this);
                    }
                }
            }
            this.initStatus = true;//渲染swiper
        })
    },
    methods:{
        roundString() {
            //生成隨機字符串
            let str = "";
            let chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
            chars.forEach(() => {
                str += chars[Math.ceil(Math.random()*25)]
            });
            return str;
        }
    }
}
</script>
<style lang="scss" scoped>
.swiperWrap{
    .swiper-slide{
        img{
            width:100%;
            height:100%;
        }
    }
}


</style>

在頁面中使用：

banners:[
          {src:"http://kexiepingtaieposter.hoohui.cn/paper_file/15908353622331590835195(1).png",link:"http://www.baidu.com"},
          {src:"http://kexiepingtaieposter.hoohui.cn/paper_file/15908353884901590835256(1).jpg",link:""},
      ],

import swiperCpt from '~/components/swiperCpt.vue';
components: { swiperCpt},

<swiperCpt :list="banners"></swiperCpt>

 

 

。