解决由于网络请求导致vue中使用Better-scroll页面无法滚动问题

问题描述：

将better-scroll封装后页面无法滚动。

scroll.vue组件代码如下：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>

import BScroll from 'better-scroll'

export default{
  name: '',
  data() {
    return {
      scroll: null    
    }
  },
  mounted() {
	this.scroll = new BScroll(this.$refs.wrapper, {})

  }
}
</script>

<style scoped>

</style>

---

home.vue实例使用代码如下(省略了负责显示网络返回数据的的组件)

<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>

    <scroll class="content" ref="scroll">
		...
    </scroll>


  </div>
</template>

<script>

import Scroll from 'components/common/scroll/Scroll'

export default{
  name: '',
  components: {
    Scroll
  }
}
</script>

<style scoped>
#home {
  /* padding-top: 44px; */
  height: 100vh;
  position: relative;
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;


 .content {

   /* overflow: hidden; */

   position: absolute;
   top: 44px;
   bottom: 49px;
   left: 0px;
   right: 0px;
}

</style>

以上运行的结果就是页面卡主无法滚动。通过浏览器自带的开发工具查看wrapper与content的高度也是符合better-scroll需求的wrapper > content。

---

随后有自己做了一个无网络请求资源的页面代码如下：

<template>
  <div class="cart">
    <scroll class="content">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'

export default{
  name: '',
  components: {
    Scroll
  }
}
</script>

<style scoped>
.cart {
  height: 100vh;
}

 .content {

   /* overflow: hidden; */

   position: absolute;
   top: 44px;
   bottom: 49px;
   left: 0px;
   right: 0px;
} 

.content div {
  width: 100%;
  height: 300px;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: yellow;
}

.div3 {
  background-color: green;
}

.div4 {
  background-color: blue;
}
</style>

发现页面滚动正常，证明封装过程是对的。于是想到可能是网络请求的缘故导致vue进行渲染是与better-scroll有冲突于是在封装组件的代码中加上了一个2秒的延迟。

---

scroll.vue修改后代码如下：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>

import BScroll from 'better-scroll'

export default{
  name: '',
  data() {
    return {
      scroll: null    
    }
  },
  mounted() {

      // 保证在DOM渲染完毕后初始化better-scroll
      setTimeout(() => {
        this._initScroll()
      }, 2000)

  },
  methods: {
    _initScroll() {
        if (!this.$refs.wrapper) {
          return
        }

        // better-scroll的初始化
        this.scroll = new BScroll(this.$refs.wrapper, {})
     }
  }
}
</script>

<style scoped>

</style>

页面加载2秒后滚动正常。