photoswipe是一款非常優(yōu)秀的移動(dòng)端圖片查看插件，但是在使用的時(shí)候，有一個(gè)令人頭疼的問題，（data-size）！

這個(gè)屬性必須填寫，且值需固定。這對(duì)我們來說是一個(gè)非常麻煩的問題，為了解決這個(gè)問題，我上網(wǎng)搜了很多解決方案，但是給出的解決方案都無法獲取到圖片的寬高（數(shù)據(jù)加載使用的是異步加載）。

最后我在photoswipe的官網(wǎng)上找到了解決方案。（github討論區(qū)內(nèi)）

在openPhotoSwipe函數(shù)內(nèi)，對(duì)PhotoSwipe有一個(gè)實(shí)例，正常的寫法是：

gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init();

我看到有大神在討論區(qū)內(nèi)對(duì)這個(gè)實(shí)例進(jìn)行了補(bǔ)充：

gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.listen('imageLoadComplete', function(index, item) {var linkEl = item.el.children[0];var img = item.container.children[0];if (!linkEl.getAttribute('data-size')) {linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);item.w = img.naturalWidth;item.h = img.naturalHeight;gallery.invalidateCurrItems();gallery.updateSize(true);} }); gallery.init();

添加了這些代碼后，我在經(jīng)過嘗試之后，發(fā)現(xiàn)點(diǎn)擊的第一次真的是自適應(yīng)寬高，但是第二次進(jìn)去圖片輪播進(jìn)行點(diǎn)擊的時(shí)候，發(fā)現(xiàn)還是固定的寬高。

<div class="layui-upload-list upload-img-list my-gallery" data-pswp-uid="1" id="img-gallery"><figure v-for="(i,index) in imgArr" class="imgBox"><div class=" img-dv" @click="openCarousel(index)"><a class="layui-upload-img" :href="'../'+i" data-size="1980x1080" :data-med="'../'+i" ><img class="layui-upload-img" :src="'../'+i"></a></div></figure> </div>

上面是我的代碼結(jié)構(gòu)。經(jīng)過調(diào)試，發(fā)現(xiàn)在上面補(bǔ)充的代碼是將data-size這個(gè)屬性加到了a標(biāo)簽外面的div內(nèi)。但是又不能刪除a標(biāo)簽內(nèi)的data-size屬性，為了解決這個(gè)錯(cuò)誤，我在一開始判斷size的時(shí)候，對(duì)其進(jìn)行了判斷。

if(divEl.getAttribute('data-size')) {size = divEl.getAttribute('data-size').split('x'); }else {size = linkEl.getAttribute('data-size').split('x'); }

這樣就解決問題啦！

但是還存在一個(gè)問題就是在第一次進(jìn)輪播圖的時(shí)候會(huì)有閃爍，希望有大神可以優(yōu)化這個(gè)問題。

希望可以幫到大家。如果有不懂的地方，大家可以給我留言。

總結(jié)

以上是生活随笔為你收集整理的关于photoswipe的data-size问题-自适应宽高的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。