瀏覽代碼

瀑布流组件延迟加载以保证图片分为两列

任一存 3 年之前
父節點
當前提交
91ae7f3ed9
共有 1 個文件被更改,包括 5 次插入1 次删除
  1. 5 1
      src/views/ExhibitionDetail.vue

+ 5 - 1
src/views/ExhibitionDetail.vue

@@ -166,7 +166,7 @@
         @click="onClickExhibitionImage(0)"
       >
       <waterfall
-        v-if="choosenExhibition.imageNumber > 1"
+        v-if="choosenExhibition.imageNumber > 1 && canShow"
         :col="2"
         :width="waterfallImgWidth"
         :gutter-width="gutterWidth"
@@ -224,6 +224,7 @@ export default {
       imageSrc: null,
       linkSrc: null,
       curTabIdx: 0,
+      canShow: false, // 延迟加载瀑布流组件,才能保证图片被分为两列。这组件真垃圾。
     }
   },
   computed: {
@@ -264,6 +265,9 @@ export default {
   watch: {
   },
   mounted() {
+    setTimeout(() => {
+      this.canShow = true
+    }, 1000)
   },
   destroyed() {
     // qq浏览器的bug:本组件被销毁后,视频元素依然存在。需要刷新页面。