项目场景:
移动端content内容可以滚动
问题描述
部分组件滚动不全
原因分析:
接口获取图片数据需要时间,而better-scroll里的scrollHeight已经预先计算出可滚动高度,导致后面加载出来的图片无法滚动
解决方案:
方法一
Scroll.vue
mounted () {
// 解决图片加载导致滚动不全问题
// 方法一
this.scroll = new BScroll(this.$refs.wrapper, {
observeDOM: true
})
// 方法二:
// this.$nextTick(() => {
// this.scroll = new BScroll(this.$refs.wrapper, {})
// })
},
方法三 添加updated方法
updated () {
//解决better-scroll因为图片没有下载完导致的滚动条高度不够,无法浏览全部内容的问题。
//原因是better-scroll初始化是在dom加载后执行,此时图片没有下载完成,导致滚动条高度计算不准确。
//利用图片的complete属性进行判断,当所有图片下载完成后再对scroll重新计算。
let img = document.getElementsByClassName('content')[0].getElementsByTagName('img')
let count = 0
let length = img.length
if (length) {
let timer = setInterval(() => {
if (count == length) {
// console.log('refresh')
this.scroll.refresh()
clearInterval(timer)
} else if (img[count].complete) {
count++
}
}, 100)
}
},