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

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

猜你喜欢