vue-swiper的踩坑之旅

在查找vue-swiper的官网时，看到了SSR和SSA这两种类型，当时很迷茫，因为没接触过，一直以为这两种形式的代码，会在使用上有不同，询问了大牛及查找资料后，了解到

 ssr 是服务端渲染， server side render， ssr 的意思是模板的渲染在服务端完成；

ssa是客户端的 js 来渲染内容。

最后实现的效果是图片轮播，

抽成的组件为：

<template>
<div class="swiper-container" >
　　<div class="swiper-wrapper" ref="mySwiperA">
　　<div class="swiper-slide" v-for="str in listImg"
　　　　:style="{ backgroundImage: 'url(' + str.url + ')' }"></div>
　　</div>
　　<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
　　<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
　　<div class="swiper-pagination swiper-pagination-white"></div>
</div>
</template>

<script>
import Swiper from 'swiper';
export default {
props: ['listImg'],
mounted() {
// console.log('mounted', this)
var swiper = new Swiper('.swiper-container', {
　　pagination: '.swiper-pagination',
　　paginationClickable: true,
　　loop: true,
　　speed: 600,
　　autoplay: 3000,
　　prevButton:'.swiper-button-prev',
　　nextButton:'.swiper-button-next',
　　onTouchEnd: function() {
　　swiper.startAutoplay()
}
});
},
data(){
　　return{
　　　　swiperOption: {
　　　　　　// 所有配置均为可选（同Swiper配置）
　　　　　　notNextTick: true,
　　　　　　grabCursor : true,
　　　　　　prevButton:'.swiper-button-prev',
　　　　　　nextButton:'.swiper-button-next',
　　　　}
　　}
}
}
</script>

<style lang="scss" scoped>
@import '../../node_modules/swiper/dist/css/swiper.css';
.swiper-container {
width: 100%;
height: 22.5rem;
.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.swiper-pagination-bullet {
width:0.833rem;
height: 0.833rem;
display: inline-block;
background: #7c5e53;
}
.swiper-button-prev{background-image:url(./images/left_arrow.png)}
.swiper-button-next{background-image:url(./images/right_arrow.png)}
}
</style>

 

 

在vue中引用的时候直接使用import 导入，然后components注册完成后，

直接

<Banner :listImg="listImg"></Banner>就可以了。

Banner是起的注册组件名称。