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点半了，今天晚上可以睡个好觉了。