better-scroll不能滾動問題

跨年夜：2021年1月1日 01:22：23 星期五
解決bug：better-scroll不能滾動問題。

首先給出圖
這個專案是在網上找的視訊看的，就照著寫了，網上的視訊是有介面的，但是我看的時候介面不能用，它告訴我

算了，求人不如求己，我還是自己來吧，想了半天，我還是自己mock資料吧，於是 ---->

扒了600多行的json，恩，介面總算通了。渲染完畢以後就有了上第一個圖片。

接下來是重點了，第一個圖片雖然渲染的沒問題，但是，它不能滾動，我用的是better-scroll外掛，我仔仔細細的檢查了一遍，也在網上查了很多為什麼不能滾動的原因，幾乎結果都是因為，content的高度不夠，但是我開啟看我的dom元素

你告訴我不夠？好吧，又各種改啊，各種弄啊，反正這個跨年夜各種新年快樂，我是一點沒感覺到快樂。。
突然，我猛然象到既然dom夠，為什麼不能滾動？不能滾動的原因是什麼，我看了一下我的程式碼
因為這個是我自己寫的，所以沒加什麼註釋，我這裡簡單加一點

export default {
  components: {		//封裝了一個輪播圖的元件，引了進來
    Banner,
  },
  data() {
    return {		//儲存輪播圖資料，和l列表資料
      bannerList: [],
      singList: []
    };
  },
  //這裡是封裝了三個方法，一個是better-scroll初始化，一個是獲取輪播圖資料，還有一個是列表資料，這兩個是網路請求啦，當然是本地mock到的資料，苦澀。。
  methods: {
    initBs() {			
      let wrapper = this.$refs.wrapper;
      return new Bs(wrapper, {});
    },
    getBannerData() {
      let url = "/banner";
      this.$axios.get(url, { dataType: "json" }).then((res) => {
        console.log(res);
        this.bannerList = res.slider;
      });
    },
    getListData() {
      let url1 = "/hehe";
      this.$axios.get(url1, { dataType: "json" }).then((res) => {
        console.log(res);
        this.singList = res.list;
      });
    },
  },
	//請注意，我在這裡呼叫了三個方法。
  mounted() {
    this.initBs();
    this.getBannerData();
    this.getListData();
  },
};
</script>

我的js程式碼是這樣寫的，導致我的輪播圖滾不起來，總結起來原因：主要是因為在初始化better-scroll的時候沒有資料，也就是說我的li裡面並沒有被渲染。

<template>
  <div class="recommend">
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <!-- banner圖 -->
        <Banner :banners="bannerList"></Banner>
        <h1 class="hotSingList">熱門歌曲推薦</h1>
        <!-- 歌曲列表 -->
        <ul class="singList">
          <li v-for="item in singList" :key="item.dissid">
            <div class="left">
               <img :src="item.imgurl" alt="">
            </div>
            <div class="right">
                <h2>{{item.creator.name}}</h2>
                <p>{{item.dissname}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

請看，我的li的個數是根據請求來的資料迴圈渲染的，但是我們都知道網路請求是非同步的，也就是說我在初始化better-scroll的時候網路請求還沒有發，也就說這個時候的li並沒有渲染出來，所以初始化的時候也不能正確的獲取到dom的高度，這個時候它會認為，content的高度並沒有wrapper高，所以不會滾動。這就是原因。
我們看這個

這個是better-scroll物件，圈中的這部分是表示是否進行滾動，很明顯是false。
上面都是原因，那麼我們看看如何解決：

  //加上watch監聽。
  watch: {
    singList() {
      this.$nextTick(() => {
        this.initBs();
      });
    },
  },
  beforeCreate() {},
  mounted() {
    // this.initBs();    //把寫在這裡的方法註釋調
    console.log(this.initBs());
    this.getBannerData();
    this.getListData();
  },
};

我把寫在mounted這個生命週期的初始化註釋掉了，然後寫了一個監聽，監聽singList的改變，如果這個資料改變了說明網路請求完成了，這個singList被重新賦值了，然後我用了this.$nextTick，這個方法的作用是解決有資料沒有dom的問題，它是等dom渲染完以後，在去操作函式裡面的方法。

以上便是我解決這個問題的方法，如果遇到了這個問題不妨往這邊考慮一下。當然我的理解可能也會有偏差，如果有錯，希望能指正，不勝感激，對我的解釋有疑問也可以私信我，看見了必定回覆。
撕_好冷1點半了，今天晚上可以睡個好覺了。