vue使用swiper的简单用法
<template>
<div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
<swiper :options="swiperOption" v-if="swiperSlides.length>1" ref="mySwiper">
<swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
<img :src="slide.url">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import axios from "axios"
export default {
name: "Index",
data() {
return {
swiperSlides: [],
swiperOption:{
pagination:{
el:'.swiper-pagination',
clickable:true,
},
// paginationClickable:true
autoplay:{
delay:5000,//秒
stopOnLastSlide:false,
disableOnInteraction:false,//滑动不会失效
},
// slidesPerView: 3,
loop:true,//loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
loopFillGroupWithBlank: true,
autoplayDisableOnInteraction:true
},
}
},
components:{
swiper,
swiperSlide
},
mounted(){
this.loadBanner();
// setInterval(()=>{
// console.log('异步数据')
// if(this.swiperSlides.length<3){
// this.swiperSlides.push(this.swiperSlides.length+1)
// }
// },3000);
},
methods: {
loadBanner(){
this.$http.get('../../static/data.json')
.then((res)=>{
console.log(res.data);
this.swiperSlides=res.data.banner;
console.log(this.swiperSlides);
})
.catch(function(res){
console.log(res);
})
},
//通过获得的swiper对象来暂停自动播放
on_top_enter(){
this.mySwiper.autoplay.stop()
},
on_top_leave(){
this.mySwiper.autoplay.start()
}
},
computed:{
//计算属性，获得可以操作的swiper对象
mySwiper(){
return this.$refs.mySwiper.swiper
}
}
};
</script>
<style scoped>
img{
width: 100%;
height: auto;
}
</style>
