一.問題描述

在使用Vue2開發(fā)移動端頁面的時候，需要做一個效果，實現(xiàn)的方案是背景漸變，但是想要實現(xiàn)這個效果就必須進(jìn)行定位，然后設(shè)置z-index讓這個元素在其他元素的下面，我的背景高度需要在一個十分恰當(dāng)?shù)奈恢?，在這個背景上面還有另外一張圖片，但是我的圖片會隨著移動端頁面的變化而發(fā)生高度的變化，為什么會變化哪？因為我設(shè)置了圖片的寬度為100%這樣就有可能導(dǎo)致，背景的位置在寬屏的情況下和UI差距比較大，所以我需要獲取圖片的高度，然后在這個高度上增加合適的高度就可以在任何屏幕中自適應(yīng)，但是無論我在mounted中如何獲取，甚至在$nextTick中獲取到的圖片高度都是0，導(dǎo)致一直無法實現(xiàn)自己想要的效果，以上描述的效果基本如下：

二.問題分析

出現(xiàn)這個問題的點在于，進(jìn)行背景設(shè)置的元素，是定位的，所以脫離了標(biāo)準(zhǔn)流，導(dǎo)致它的高度無法被撐起來，并且也不能撐起來，因為它的高度是一個比較特殊的高度，所以只能進(jìn)行定位，但是又因為圖片的高度變化，導(dǎo)致背景一個固定的值不能滿足要求，解決方案是動態(tài)獲取圖片的高度然后相應(yīng)的去設(shè)置背景元素的高度，比較坑的地方就在于直接在mounted和$nextTick中拿不到高度，原因在于圖片未加載完成，所以需要在圖片完全加載后進(jìn)行后續(xù)的處理。

三.問題解決

解決方案一： 使用JS的方式進(jìn)行獲取圖片高度，在圖片高度的基礎(chǔ)上動態(tài)設(shè)置背景高度。

methods: {
  handleImageLoad(event) {
    const height = event.target.offsetHeight;
    this.height1 = height + 120;
  },

  getPicHeight() {
    this.height1 = this.$refs.myPictrue.offsetHeight + 120;
  },
},

  mounted() {
    window.addEventListener("resize", () => {
      this.getPicHeight();
    });
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.getPicHeight);
  },

解決這個問題的方法就是使用 @load="handleImageLoad"當(dāng)圖片加載完畢之后就會直接出發(fā)這個方法中的邏輯進(jìn)行處理，然后獲取高度來讓背景跟隨圖片高度進(jìn)行變化。

解決方案二： 手動計算圖片比例，使用vw進(jìn)行動態(tài)計算。

.img {
  width: 100vw;
  height: 40vw;
  position: relative;
  z-index: 9;
  background-color: red;
}
.img-bg {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(40vw + 120px);
  background-color: green;
}

四.問題總結(jié)

這個問題其實本質(zhì)原因還是對不同內(nèi)容加載完成時機(jī)不夠清楚，因為在開發(fā)過程中有時候確實不太會去考慮拿到圖片的高度，但是其實使用vw來解決這個問題其實是更好的，它的缺點在于需要自己去計算寬高比，但是本著不寫代碼就不會有bug的原則，能夠盡量使用純CSS解決的問題就用純CSS來解決。

到此這篇關(guān)于Vue中獲取圖片高度的兩種方法的文章就介紹到這了,更多相關(guān)Vue中獲取圖片高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論