【vue】better-scroll滚动不全

项目场景：

移动端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)
      }

    },