photoswipe是一款非常優秀的移動端圖片查看插件，但是在使用的時候，有一個令人頭疼的問題，（data-size）！

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

最后我在photoswipe的官網上找到了解決方案。（github討論區內）

在openPhotoSwipe函數內，對PhotoSwipe有一個實例，正常的寫法是：

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

我看到有大神在討論區內對這個實例進行了補充：

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();

添加了這些代碼后，我在經過嘗試之后，發現點擊的第一次真的是自適應寬高，但是第二次進去圖片輪播進行點擊的時候，發現還是固定的寬高。

<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>

上面是我的代碼結構。經過調試，發現在上面補充的代碼是將data-size這個屬性加到了a標簽外面的div內。但是又不能刪除a標簽內的data-size屬性，為了解決這個錯誤，我在一開始判斷size的時候，對其進行了判斷。

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

這樣就解決問題啦！

但是還存在一個問題就是在第一次進輪播圖的時候會有閃爍，希望有大神可以優化這個問題。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。