bscroll 无法滚动到底部。

来源：4-11 scroll 组件的抽象和应用（下）

一十xwjian

2018-12-26

HTML 代码

<scroll class="wrapper" ref="scroll">
   <div class="m-cdetail">
	   // 富文本内容
       <div v-html="data && data.content"></div>
   </div>
</scroll>

methods: {
  _refreshScroll() {
      let imgElemList = document.querySelectorAll('img')
      let imgList = Array.prototype.slice.call(imgElemList)
	  // 获取图片, 计算图片高度, 进行重新计算高度
      imgList.forEach(element => {
          element.onload = () => {
              this.$refs.scroll.refresh()
          }
      })
  },
  created() {
      setTimeout(() => {
          this._refreshScroll()    
      }, 100)
  }

浏览器可以获取到高度

真机魅族测试滚动不到底部…

写回答

3回答

ustbhuangyi

2018-12-26

已采纳

你的富文本里有图片吧，你需要等待富文本图片里的图片加载完成的时候执行 scroll 的 refresh，你可以基于 vconsole 做一下调试。

一十xwjian

关于富文本里面的延迟调用 refresh, 现在富文本里面的就 3 个图片, 我设置了 500 延迟，不知道图片多了会不会有问题。。。

2018-12-26

共2条回复

一十xwjian

提问者

2018-12-26

现在代码改成这样了。。。

_refreshScroll() {
    let imgElemList = document.querySelectorAll('img')
    let imgList = Array.prototype.slice.call(imgElemList)
    
    console.log(imgList)
    
    imgList.forEach(element => {
        let img = new Image()
        img.src = element.src
        console.log(img.height, img.width)
        img.onload = () => {
            this.$refs.scroll.refresh()
        }
    })
}

created() {
    this._getCmsInfo()
    setTimeout(() => {
        this._refreshScroll()
    }, 20)
},

一十xwjian

提问者

2018-12-26

关于富文本里面的延迟调用 refresh, 现在富文本里面的就 3 个图片, 我设置了 500 延迟，不知道图片多了会不会有问题。。。

_refreshScroll() {
    // imgElemList Android 不支持 Element.forEach, 所以转换类数据
    let imgElemList = document.querySelectorAll('img')
    let imgList = Array.prototype.slice.call(imgElemList)
    let img, item, that = this

    for (let i = 0; i < imgList.length; i++) {
            item = imgList[i]
            img = new Image()
            img.src = item.src
            img.onload = function() {
                that.$refs.scroll.refresh()
        }
    }
}

=== 调用 ====

created() {
    // 接口获取富文本数据
    this._getCmsInfo()
    setTimeout(() => {
        // 刷新
        this._refreshScroll()
    }, 500)
},

ustbhuangyi

一十xwjian

嗯，数据的加载完毕时机才是靠谱的

2018-12-27

共5条回复

Vue2.0高级应用教学实战，开发企业级移动端音乐Web App

Vue.js高级知识应用大集合，实战企业级APP，教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程

相似问题

bscroll无法滚动

回答 1

第一次打开页面时无法上下滚动

回答 1

scroll滚动的问题

回答 4

关于搜索列表切换到shortcut不能滚动的原因还是有点不明白？

回答 1

为什么我使用滚动后，无法滚动到最后一张图呢？

回答 2

打开慕课网App查看更多内容