对swiper的简单封装(可复用) 主要是在vue中使用swiper
引入所需文件 swiper的css js vue.js
<div id="app">
<!-- 用key 或者v-if 都可 -->
<!-- <swiper :key="dataList.length">
<div class="swiper-slide" v-for="item in dataList">
{{item}}
</div>
<template #pagination>
<div class="swiper-pagination"></div>
</template>
</swiper> -->
<swiper v-if="dataList.length" :myoptions="{loop:true}">
<div class="swiper-slide" v-for="item in dataList">
{{item}}
</div>
<template #pagination>
<div class="swiper-pagination"></div>
</template>
</swiper>
</div>
<script type="text/javascript">
Vue.component('swiper',{
props:["myoptions"],
template:`
<div class="swiper-container box">
<div class="swiper-wrapper">
<slot></slot>
</div>
<slot name="pagination"></slot>
</div>
`,
mounted() {
console.log("myoptions",this.myoptions)
var baseoptions = {
loop: false,
pagination: {
el: '.swiper-pagination',
},
}
new Swiper('.swiper-container', Object.assign(baseoptions,this.myoptions));
}
})
var vm = new Vue({
el: '#app',
data: {
dataList: [],
},
mounted() {
setTimeout( ()=> {
this.dataList = ["aaa","bbb","ccc"]
},2000)
},
})
</script>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-container img {
width: 100%;
}