javascript - 使用mint-ui的无限滚动提示getBoundingClientRect找不到-PHP中文网问答

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

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

附上tabbar.vue里的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)
    }
  }
}

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

补充app.vue

全部回复(2)

ringa_lee2017-04-11 12:09:08 2楼

可以引用'vue-infinite-loading'

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

赞 +0

添加回复

PHP中文网2017-04-11 12:09:08 1楼

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

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

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

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

Infinite Scroll

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