昨天在上班中要做一个商品页面,需求是从后台接口获得轮播图的路径,然后传到封装好的组件中,本来以为很简单啊,没什么毛病,开始动手~
东西很简单,新建一个banner组件 如下:
<template> <!--全屏幕轮播图 --> <!-- <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style = "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