<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前后復(fù)制若干個slide(默認(rèn)一個)并在合適的時候切換，讓Swiper看起來是循環(huán)的。
? ? ? ? ? loopFillGroupWithBlank: true,
? ? ? ? ? autoplayDisableOnInteraction:true
? ? ? },
? ? ? }
? },
? components:{
? ? swiper,
? ? swiperSlide
? },
? mounted(){
? ? this.loadBanner();
? ? // setInterval(()=>{
? ? //? console.log('異步數(shù)據(jù)')
? ? //? 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>
