最近項(xiàng)目中基于vue-awesome-swiper再次封裝素跺，遇到使用循環(huán)滾動(dòng)總是出現(xiàn)空白頁(yè)問題顷霹。
具體使用
我在封裝的時(shí)候熊赖，為了提高響應(yīng)速度，使用了圖片的懶加載承二，再加上設(shè)置循環(huán)滾動(dòng)的時(shí)候榆鼠，即loop=true，發(fā)現(xiàn)每次在要切換的時(shí)候,就會(huì)出現(xiàn)一個(gè)空白的圖片頁(yè)亥鸠，苦思冥想很長(zhǎng)時(shí)間妆够，終于找到問題根源。
問題原因
我們都知道左右滾動(dòng)循環(huán)的動(dòng)畫原理就是：
在第一張前面加上最后一張的圖片负蚊，在最后一張的后面加上第一張圖片神妹，在切換后，再把圖片位置換成應(yīng)該出現(xiàn)的那個(gè)圖片位置家妆，因?yàn)閳D片一樣鸵荠，所以肉眼無(wú)法識(shí)別掷酗，這樣就實(shí)現(xiàn)了左右循環(huán)切換样屠。
由以上原理鲫咽，再加上圖片懶加載劫恒，圖片懶加載，就是沒加載庸疾，也就是說(shuō)乍楚，沒圖片，空白頁(yè)届慈，所以自動(dòng)填充到后面和前面的圖片為空徒溪，即空白頁(yè)。
解決方法
對(duì)圖片的最后一張和第一張不使用懶加載就可以了金顿。
<swiper :options="Setting" v-if="list.length>0">
<swiper-slide v-for="(item,index) in list" :key="item.id">
<img :src="item.image.url" v-if="index==0||index==(list.length-1)" />
<img v-lazy="item.image.url" v-else />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
問題解決臊泌，比原來(lái)也就多加載了一張圖片
