js瀑布流触底动态加载数据

<template>
<div class="box" ref="box" @mousewheel="onScrollEvent">

      <div class="boxItemStyle" v-for="(userTag, i) in dataSource" :key="i" ref="boxItemStyle">
        <a-tag class="moreStyle" @click="more(userTag.primaryParam)"> 更多></a-tag>
        <div v-for="item in userTag.userTag" :key="item.code">
          <p>
            <span style="text-align: left"> {{ item.name }}:</span>
            <span style="text-align: right">{{ item.value }}</span>
          </p>
        </div>
      </div>
    </div>
</template>
export default {
  data(){
    return {
      isReachBottom: false,
      reachBottomDistance: 100
    }
  },
 methods: {
   onScrollEvent () {
      let scrollTop = this.$refs.box.scrollTop
      let scrollHeight = this.$refs.box.scrollHeight
      let offsetHeight = Math.ceil(this.$refs.box.getBoundingClientRect().height)
      let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
      if (currentHeight < scrollHeight && this.isReachBottom) {
        this.isReachBottom = false
      }
      if (this.isReachBottom) {
        return
      }
      if (currentHeight >= scrollHeight) {
        this.isReachBottom = true
        this.loading = true
        if (this.ipagination.current == 1) {
          this.ipagination.current += 1
        }
        let param = {}
        param['pageNo'] = this.ipagination.current
        param['pageSize'] = this.ipagination.pageSize
        param['portraitId'] = this.portraitId
        postAction(this.url.list, { ...param }).then((res) => {
          this.loading = false
          if (res.success) {
            this.isScroll = res.result.records
            this.dataSource = this.dataSource.concat(res.result.records || res.result)
            this.waterFall();
          }
        })
        this.ipagination.current++
      }
    }
  }
}