本文解決問題
解決Better-Scroll因為圖片沒有下載完導致的滾動條高度不夠乞娄，無法瀏覽全部內容的問題瞬逊。
雖然知識點很簡單，但是網上的代碼偏少仪或，無法做到拿來就用确镊，故而寫此文，希望遇到此類問題的朋友有所幫助范删。
本文適合以下讀者
- 使用Vue進行前端開發(fā)蕾域；
- 使用Better-Scroll組件，并且已經熟知基本開發(fā)原則到旦；
解決思路
問題核心
圖片的異步加載旨巷，且速度慢，導致頁面高度沒有及時更新添忘；
解決思路
利用<img>標簽的complete屬性采呐，當img全部加載完畢，更新Better-Scroll搁骑；
分為兩步：
- 一般情況斧吐，會用到動態(tài)圖片的地方，主要是在正文的內容仲器，需要設置一個ref煤率，然后程序獲得ref中所有的圖片屬性。使用getElementsByTagName
- 寫一個interval循環(huán)乏冀，判斷圖片是否全部加載完畢蝶糯；
代碼
- 設定ref
因為我的代碼中正文是在Detail組件內的，所以我用了兩個ref辆沦，具體為：
Product.vue（主頁面）
<!-- 產品詳情 -->
<Detail ref="Detail" :goods="goods"></Detail>
Detail.vue（組件）
<div ref="detailWrapper">
<div class="content_wrapper" v-html="goods.content"></div>
</div>
- 關鍵的interval循環(huán)
updateScrollImage() {
//解決better-scroll因為圖片沒有下載完導致的滾動條高度不夠裳涛，無法瀏覽全部內容的問題。
//原因是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);
}
},
- updateScrollImage調用在遠程數據賦值之后
this.$axios(`/api/goods/getGoods/${this.goodsId}`).then(res => {
// 略
this.initScroll();
this.updateScrollImage();
});
- 其他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 結構發(fā)生變化的時確保滾動效果正常
}
});
},
完畢蛛株，請大家根據情況使用团赁。謝謝。
