vue-awesome-swiper 第一张自动跳过

　　昨天在上班中要做一个商品页面，需求是从后台接口获得轮播图的路径，然后传到封装好的组件中，本来以为很简单啊，没什么毛病，开始动手~

　　东西很简单，新建一个banner组件 如下：

<template>

        <!--全屏幕轮播图 -->

               <!-- <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style = "width:16rem;height:5.12rem;"> -->

               <swiper :options="swiperOption" ref="mySwiper" :style = "warpStyle" style = "z-index:0;">

                                    <!-- slides -->

                                    <swiper-slide v-for = "item in pages" :key = "item.url" >

                                        <img :src="item" class="swiper-lazy" :style = "warpStyle" >

                                        <div class="swiper-lazy-preloader"></div>

                                    </swiper-slide>

                                    <!-- Optional controls -->

                                    <div class="swiper-pagination"  slot="pagination"></div>

                     </swiper>

</template>

<script>

// require styles

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

    props:["warpStyle","pages"],

     name: 'carrousel',

    data() {

      return {

        swiperOption: {

    loop: true,

     pagination: {

      el: '.swiper-pagination',

    },

    autoplay:true,

    delay:3000,

    disableOnInteraction:false,

    effect:"slide",

      lazy: {

    loadPrevNext: true,

  },

        }

      }

    },

    computed: {

      swiper() {

        return this.$refs.mySwiper.swiper

      }

    },

    mounted() {

      // current swiper instance

      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

    //   console.log('this is current swiper instance object', this.swiper)

    },

    components: {

        swiper,

        swiperSlide

  }

}

</script>

<style>

    .swiper-lazy-preloader{

        background:transparent;

    }

</style>

　　　　　　然后新建个数组，获取之后直接赋值给数组，就当我以为大功告成时候，问题来了，第一张会自动跳过，而静态的却没有问题，经过千辛万苦才发现应该是swiper二次渲染的问题，那怎么办呢？那就让他开始不加载把，等到获取完了再引入呗，代码如下：

因为是项目的组件，所以使用的话还需要传入一个wrapStyle是包裹的样式，一个options是swiper的配置，需要的小伙伴自行使用把

不懂的话或者需要交流的朋友，可以加我qq：15274527