本文解决问题
解决Better-Scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
虽然知识点很简单，但是网上的代码偏少，无法做到拿来就用，故而写此文，希望遇到此类问题的朋友有所帮助。
本文适合以下读者
- 使用Vue进行前端开发；
- 使用Better-Scroll组件，并且已经熟知基本开发原则；
解决思路
问题核心
图片的异步加载，且速度慢，导致页面高度没有及时更新；
解决思路
利用<img>标签的complete属性，当img全部加载完毕，更新Better-Scroll；
分为两步：
- 一般情况，会用到动态图片的地方，主要是在正文的内容，需要设置一个ref，然后程序获得ref中所有的图片属性。使用getElementsByTagName
- 写一个interval循环，判断图片是否全部加载完毕；
代码
- 设定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循环
updateScrollImage() {
//解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
//原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
//利用图片的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 结构发生变化的时确保滚动效果正常
}
});
},
完毕，请大家根据情况使用。谢谢。
