本文解決問題

解決Better-Scroll因為圖片沒有下載完導致的滾動條高度不夠，無法瀏覽全部內(nèi)容的問題。

雖然知識點很簡單，但是網(wǎng)上的代碼偏少，無法做到拿來就用，故而寫此文，希望遇到此類問題的朋友有所幫助。

本文適合以下讀者

1. 使用Vue進行前端開發(fā)；
2. 使用Better-Scroll組件，并且已經(jīng)熟知基本開發(fā)原則；

解決思路

問題核心

圖片的異步加載，且速度慢，導致頁面高度沒有及時更新；

解決思路

利用<img>標簽的complete屬性，當img全部加載完畢，更新Better-Scroll；

分為兩步：

1. 一般情況，會用到動態(tài)圖片的地方，主要是在正文的內(nèi)容，需要設(shè)置一個ref，然后程序獲得ref中所有的圖片屬性。使用getElementsByTagName
2. 寫一個interval循環(huán)，判斷圖片是否全部加載完畢；

代碼

1. 設(shè)定ref
   因為我的代碼中正文是在Detail組件內(nèi)的，所以我用了兩個ref，具體為：
   Product.vue（主頁面）

<!-- 產(chǎn)品詳情 -->
<Detail ref="Detail" :goods="goods"></Detail>

Detail.vue（組件）

<div ref="detailWrapper">
  <div class="content_wrapper" v-html="goods.content"></div>
</div>

2. 關(guān)鍵的interval循環(huán)

updateScrollImage() {
      //解決better-scroll因為圖片沒有下載完導致的滾動條高度不夠，無法瀏覽全部內(nèi)容的問題。
      //原因是better-scroll初始化是在dom加載后執(zhí)行，此時圖片沒有下載完成，導致滾動條高度計算不準確。
      //利用圖片的complete屬性進行判斷，當所有圖片下載完成后再對scroll重新計算。
      let imgs = this.$refs.Detail.$refs.detailWrapper.getElementsByTagName("img");
      if (imgs) {
        let that = this;
        let timer = setInterval(() => {
          let all1 = false;
          //console.log(imgs);
          for (let n1 = 0; n1 < imgs.length; n1++) {
            console.log(imgs[n1].complete);
            if (imgs[n1].complete) {
              all1 = true;
              continue;
            } else {
              all1 = false;
              break;
            }
          }
          //console.log(all1);
          if (all1) {
            that.scroll.refresh();
            clearInterval(timer);
          }
        }, 100);
      }
    },

3. updateScrollImage調(diào)用在遠程數(shù)據(jù)賦值之后

this.$axios(`/api/goods/getGoods/${this.goodsId}`).then(res => {
          // 略
         this.initScroll();
         this.updateScrollImage();
 });

4. 其他initScroll代碼

initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.productWrapper, {
            click: true, // 配置允許點擊事件
            scrollY: true // 開啟縱向滾動
          });

          this.scroll.on("scrollEnd", this.onScroll);
        } else {
          this.scroll.refresh(); // 重新計算 better-scroll，當 DOM 結(jié)構(gòu)發(fā)生變化的時確保滾動效果正常
        }
      });
    },

完畢，請大家根據(jù)情況使用。謝謝。