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>

 

 

。