2020-03-03 Vue项目中引入better-scroll

最近框架有用到better-scroll，说实话坑还是有点的
遇到其中一个就是一个列表全部都是图片，因为引入better-scroll后，导致上拉到一部分，再怎么拉动就拉不上去的bug。
经过分析知道：是由于图片过多，加载速度也不一样导致,better-scroll 不能准确的知道这个高度到底是多大造成的。
解决办法有2个：
第一个不是很完美的：
列表数据加载完成后，延迟重新计算下高度，但是遇到网络等问题的时候会计算不准确

settimeout(()=>{
this.$refs.scroll.refresh
},300)

第二种方法完美解决：

<img v-for="(item, index) in detailInfo.detailImage[0].list" 
        :src="item|Imgfilter" :key="index" alt="" @load="imgLoad">

这里的图片 就是子组件里的图片 @load="imgLoad" 会监听到图片加载完成，然后通过refs.scroll.refresh 就可以完美解决
但是会有一个问题就是有多张图片的话会重复调用多次，这时我们可以用防止抖动的函数，减少调用次数，

/**
 * 防抖动函数，防止函数调用频繁，图片加载完成后，再进行重新计算高度的刷新
 */
export  function debounce(func, delay) {
    let timer;
    return function(...args) {
        if (timer) clearTimeout(timer);

        timer = setTimeout(() => {
            func.apply(this, args)
        }, delay)
    }
}
在父组件imgLoad方法里调用即可完美解决
debounce(this.$refs.scroll.refresh,50)