better scroll内容有图片上拉位置不准确解决方案

前言

better scroll也是目前在移动项目中 一直推荐的滚动解决方案，随着项目功能的不断扩充一些问题也随之出现，后续问题也会一一记录并进行解决，先看一下一个常见问题 上拉加载位置不正确问题。

问题描述

在做上拉加载功能时，老是还没有滚动到一定位置就开始请求数据了，虽然不影响整体功能，但是总归来说体验不是很好。

产生原因

首先再说一下betterscroll的滚动原理

content在做translate位置变化，而wepper 则时进行边缘判断。如当上边缘两个相距大于一个值的时候就触发下来刷新事件。同理下边缘小于一个值时 触发上拉加载事件。
说完原理 现在就仅仅拿上拉加载来说，当content一直滚动到content高度- wepper高度时，就会触发上拉加载事件如下图
content的高度每次数据更新后就会变 所以betterscroll给提供了refresh()方法，来进行重新计算这个高度。正常情况下获取数据后 在this.$nextTick(）【视图更新后】进行刷新就可以了。但是通常页面上会有图片，而图片则是异步加载的，总是在页面其他数据显示之后才出来。
所以最后计算的高度就少了图片的高度，导致没有滚动到底就进行加载了

解决方案

知道了罪魁祸首那就来解决它吧，因此我们需要在图片加载完成后再进行计算一下，代码如下

updated () {
        //解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
        //原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
        //利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。
        let img = this.$refs.wrapper.getElementsByTagName('img')
        let count = 0
        let length = img.length
        if (length) {
            let timer = setInterval(() => {
                if (count == length) {
                    this.scroll.refresh()//bs提供的刷新的方法，详见官网
                    clearInterval(timer)
                } else if (img[count].complete) {
                    count ++
                }
            }, 100)
        }
        
    }

扩充

在VueLazyLoad里解决方案，为了页面的性能，我在项目中通常会用vuelazyload,来进行图片的预加载处理，而这个组件则会加载图片之后给抛出一个’loaded’方法，来进行操作
只需在 mounted内调用以下方法就可解决

this.$Lazyload.$on('loaded', (el, src)=> {
             // console.log(el, src)
             this.$nextTick(()=>{
                 setTimeout(()=>{
                     if(this.bscroll){
                         this.bscroll.refresh()
                     }
                 },200)
             })

         })

vuelazyload的使用就不多做介绍分享个链接点击查看