为了账号安全,请及时绑定邮箱和手机立即绑定

vueAwesomeSwiper循环轮播空白页

vueAwesomeSwiper循环轮播空白页

肥皂起泡泡 2019-02-26 19:15:37
1.vueAwesomeSwiper,它那个轮播给loop循环轮播后,为啥最后一张和第一张总是空白,然后切换的时候闪一下第一张图片,除了首尾轮播时异常,中间的都正常[图片]2.代码    <swiper :options="swiperOption3" ref="mySwiperC" v-if="imageLists">        <swiper-slide class="slide1 clear"  v-for="imageList in imageLists">            <router-link v-if="imageList.functionLink==1" :to="{path:'/a',query:{id.bannerTurnId}}">                <img v-lazy.container="imageList.middleUrl">            </router-link>        </swiper-slide>    </swiper>    <div class="swiper-pagination"></div>        swiperOption3: {                // 所有配置均为可选(同Swiper配置)                initialSlide:0,//设定初始化时slide的索引               slidesPerView:1,                notNextTick: true,                loop : true,                autoplay :3000,                pagination : '.swiper-pagination',                paginationClickable: true,                centeredSlides: true,                autoplayDisableOnInteraction: false,                }            }            
查看完整描述

1 回答

?
呼啦一阵风

TA贡献1802条经验 获得超6个赞

问题换个思路解决了,但肯定不是最优解:
1.为什么出现空白图,因为用了Mint-ui的lazyload图片懒加载,所以空白图是懒加载时加载出来的,至于为什么loop:true和懒加载冲突目前不知道
2.既想用图片懒加载又想用无限轮播:思路,首尾两张图片不用懒加载,中间的所有图片都使用懒加载,代码:
<img :src="imageList.middleUrl" v-if="index==0||index==(imageLists.length-1)">
<img v-lazy.container="imageList.middleUrl" v-else>
3.顺便修改一下原问题,没有表述清楚,没贴懒加载
4.目前还有个问题,就是当点击首尾图的时候跳出路由和返回:整个页面会刷新(出现这个问题条件:从最后的图片滑到直接第一张图片,点击此时的第一张图片,点击尾部图片同理),目前这个问题出现原因不详,还请哪位大神不吝赐教

查看完整回答
反对 回复 2019-03-03
  • 1 回答
  • 0 关注
  • 3073 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信