摘要：
穿过洞后，我计划在Nuxt中使用vue真棒雨刷。我原本计划直接使用cdn将wiper脚本和css文件导入页头，然后像在vue单页项目中那样使用它们。然而，一旦页面在本地刷新，雨刮器将失去功能，不会滑动，并且没有定制的导航点，（我找不到真正的原因）我不得不继续使用互联网上提到最多的vue真棒雨刮器。1.首先，安装npminstallvue aw
经过踩坑，打算在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 v-for="banner in list">
<a v-if="banner.link" :href="http://t.zoukankan.com/banner.link" target="_blank">
<img :src="http://t.zoukankan.com/banner.src">
</a>
<img v-else :src="http://t.zoukankan.com/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{
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>
。