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的使用就不多做介紹分享個鏈接點擊查看