betterScroll滾動遇到圖片，滾動位置不對

正常情況下頁面獲取數據後 執行this.$nextTick(）進行刷新就可以了。但是有時候頁面上會有圖片，導致還沒有滾動到底部就不滾動了，剛開始還以爲是自己代碼寫錯了，檢查了半天，也沒發現代碼的問題，最後網上找了挺多辦法，才發現，圖片則是異步加載的，總是在頁面其他數據顯示之後纔出來。也就是說：

scrollerHeight屬性是根據在Better-Scroll的content中的子組件的高度

但在我們的首頁中，剛開始計算 scrollerHeight 屬性時，是沒有將圖片的高度計算在內的。

所以計算出來的結果是錯誤的。

後來加載進來的圖片使得有了新的高度，但是 scrollerHeight 屬性並沒有更新。
所以滾動出了問題。
 

所以最後計算的高度就少了圖片的高度，導致沒有滾動到底就進行加載了

解決辦法就是

給圖片添加@load方法，使圖片能夠在加載出來以後，在進行刷新，計算高度，並滾動。

以下先是沒有圖片問題的滾動，基於這個基礎，再解決有圖片問題的滾動

1、先安裝better-scroll，然後引入brtter-scroll

npm install better-scroll --save

import BScroll from 'better-scroll'

2、data裏面需要定義滾動的變量：

data () {
    return {
      aboutScroll: null
    }
  },

3、需要滾動的內容要包含在一個大的div下，表示是這個div在滾動（個人理解），像這樣的格式

<div ref="content">
    <div>
      <p>滾動的內容1</p>
      <p>滾動的內容2</p>
      <p>滾動的內容3</p>
      <p>滾動的內容4</p>
    </div>
  </div>

4、需要css定義滾動的高度，超過這個高度進行隱藏，往下滑動才會出來。像這樣：紅框內表示滾動的高度

 /*文本div*/
  .contentInfo{
    background-color: #fff;
    color: #3c3c3c;
    overflow: hidden;
    height: calc(100% - 52px);
  }

5、定義滾動的方法：

 init () {
      this.$nextTick(() => {
        this.aboutScroll = new BScroll(this.$refs.content, {
          click: true
        })
      })
    }

6、在頁面初始化的時候，執行init（）方法

mounted () {
  this.init()
},

以上是簡單的使用better-scroll滾動，下面是對於存在圖片，還未滑到底部，便不滾動了的問題

這個原因是因爲，圖片是異步加載，剛開始執行init()方法時，img還未加載，以至於高度並沒有計算到這個圖片的高度，所以出現這個問題，

此時需要在img標籤上添加@load方法，並在此methods：中定義方法聲明，加載好圖片後，刷新高度滾動。

代碼如下：

 

  <p>1、滾動標題:</p>
  <p>滾動內容1</p>
  <div class="imgInfo one">
    <img src="../assets/img/圖1.png" alt="" @load="gotoLoad()">
  </div>
  <p>2、滾動標題2:</p>
  <p>滾動內容2</p>
  <div class="imgInfo two">
    <img src="../assets/img/圖2.png" alt="" @load="gotoLoad()">
  </div>

gotoLoad () {
      this.aboutScroll && this.aboutScroll.refresh()
    },

到此，對於圖片的滾動就解決了，但是移動端滾動時，會出現到底，然後彈跳下，找了一圈發現：

是因爲滾動到底部的彈跳機制沒有去掉，需要在init（）方法中定義的時候聲明：

init () {
      this.$nextTick(() => {
        this.aboutScroll = new BScroll(this.$refs.content, {
          click: true,
          bounce: false
        })
      })
    }

到此，問題就解決了~~~，有更好的辦法，歡迎指正哈