我自己的vue中实现滚动加载

// 加载区域
<div class="pullup-tips">
	<div v-if="!isPullUpLoad" class="before-trigger">
     <span class="pullup-txt">{{isComplete ? '我也是有底线的~' : '上拉加载更多...'}}</span>
   </div>
   <div v-else class="after-trigger">
     <span class="pullup-txt">加载中...</span>
   </div>
</div>

// 容器可视高度
computed: {
	containerHeight () {
	  let h = this.$refs.order.clientHeight
	  return h
	}
},
methods: {
	// 滚动监听
    handleOnScroll () {
      let containerHeight = this.containerHeight
      let scrollHeight = this.scrollHeight()
      let scroll = this.scrollT()
      console.log(scrollHeight)
      // 滚动到底部的加载栏时，如果还有商品未加载
      if (scrollHeight - containerHeight - scroll < 30 && this.isNext && this.controler) {
        // 节流阀
        this.controler = false
        // 显示加载中
        this.isPullUpLoad = true
        Order({
          page: ++this.page,
          status: this.status
        }).then((result) => {
          let res = result.data
          // 是否支持下次加载
          this.isNext = res.next
          if (res.code === 1) {
            res.data.forEach((item) => {
              this.list.push(item)
            })
            this.controler = true
            this.isPullUpLoad = false
          }
        })
      } else {
        this.isComplete = true
      }
    },
    // 滚动距离
    scrollT () {
      let h = this.$refs.order.scrollTop
      return h
    },
    // 文档完整高度
    scrollHeight () {
      let h = this.$refs.content.scrollHeight
      return h
    }
}