javascript - 使用mint-ui的无限滚动提示getBoundingClientRect找不到

Question

想利用mint-ui构建移动端页面，利用Tabbar+infinite-scroll+Tabcontent组件，但是照着官方的demo改写，却提示

Uncaught TypeError: this.$refs.wrapper.getBoundingClientRect is not a function
    at VueComponent.mounted (eval at <anonymous> (app.js:859), <anonymous>:45:85)
    

附上tabbar.vue里的template

<template>
  <p class="tabContent page-infinite">
    <h1 class="page-title">Infinite Scroll</h1>
    <p class="page-infinite-desc">当即将滚动至列表底部时, 自动加载更多数据</p>
    <mt-tab-container calss="page-infinite-wrapper" ref="wrapper" v-model="selected" :style="{ height: wrapperHeight + 'px' }" >
      <mt-tab-container-item class="page-infinite-list" id="tab-container1" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <mt-cell v-for="item in list" title="tab-container 1"></mt-cell>
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </p>
      </mt-tab-container-item>

      <mt-tab-container-item class="page-infinite-list" id="tab-container2" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <mt-cell v-for="item in list" title="tab-container 2"></mt-cell>
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </p>
      </mt-tab-container-item>

      <mt-tab-container-item class="page-infinite-list" id="tab-container3" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <mt-cell v-for="item in list" title="tab-container 3"></mt-cell>
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </p>
      </mt-tab-container-item>

      <mt-tab-container-item class="page-infinite-list" id="tab-container4" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <mt-cell v-for="item in list" title="tab-container 4"></mt-cell>
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </p>
      </mt-tab-container-item>

    </mt-tab-container>
    <mt-tabbar v-model="selected">
      <mt-tab-item id="tab-container1">
        <img slot="icon" src="../assets/100x100.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="tab-container2">
        <img slot="icon" src="../assets/100x100.png">
        分类
      </mt-tab-item>
      <mt-tab-item id="tab-container3">
        <img slot="icon" src="../assets/100x100.png">
        发现
      </mt-tab-item>
      <mt-tab-item id="tab-container4">
        <img slot="icon" src="../assets/100x100.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </p>
</template>

script部分

import Vue from 'vue'
import { Tabbar, TabItem, TabContainer, InfiniteScroll } from 'mint-ui'

Vue.component(Tabbar.name, Tabbar)
Vue.component(TabItem.name, TabItem)
Vue.component(TabContainer.name, TabContainer)
Vue.use(InfiniteScroll)

export default {
  name: 'tabbar',
  data () {
    return {
      selected: 'tab-container1',
      list: [],
      loading: false,
      allLoaded: false,
      wrapperHeight: 0
    }
  },

  methods: {
    loadMore () {
      this.loading = true
      setTimeout(() => {
        let last = this.list[this.list.length - 1]
        for (let i = 1; i <= 10; i++) {
          this.list.push(last + i)
        }
        this.loading = false
      }, 2500)
    }
  },

  mounted () {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
    for (let i = 1; i <= 20; i++) {
      this.list.push(i)
    }
  }
}
</script>

但是明明在mounted里面有这个函数了，表示很不解。

补充app.vue

<template>
  <p id="app">
    <headers></headers>
    <img src="./assets/logo.png">
    <tabbar></tabbar>
  </p>
</template>

<script>
import headers from './components/Header.vue'
import tabbar from './components/Tabar.vue'

export default {
  name: 'app',
  components: {
    headers,
    tabbar
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 1em;
}
</style>

Answer 1

可以引用'vue-infinite-loading'

地址：https://peachscript.github.io...

Answer 2

这种问题应该提供完整的demo
看代码感觉是refs的使用有问题

ref 被用来给元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

而你上面ref引用的是组件实例
但是getBoundingClientRect()是DOM元素的方法.
你可以这样改动

this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.$el.getBoundingClientRect().top