原生js触底加载案例

 data() {
    return {
      RoomData: [],
      isBool: false,
      limit: 0,
      isLoading: false,
    }
  },
  methods: {
    roomClick(value) {
      location.href = value
    },
    RoomApi() {
      this.limit = this.limit + 30
      if (this.limit >= 210) {
        this.limit = 180
      }
      this.$axios.get(`http://open.douyucdn.cn/api/RoomApi/live`, {
        params: {
          limit: this.limit
        }
      }).then(r => {
        this.RoomData = r.data.data
      })
    },
    // 滚动回调函数
    scrollHande() {
      // 节流
      // 获取内容高度
      var scrollH = document.documentElement.scrollHeight
      // 获取窗口高度
      var innerH = window.innerHeight
      // 获取滚出去的内容高度
      var top = document.body.scrollTop || document.documentElement.scrollTop
      // 当内容还剩余200的高度未滚出的时候发送请求
      console.log(this.limit);
      if (scrollH - top - innerH < 200) {
        // 节流
        if (!this.isLoading) {
          this.isLoading = true;
          setTimeout(() => {
            // 发送请求
            this.RoomApi();
            this.isLoading = false
          }, 500)
        }
      }

    },
    bindScroll() {
      window.addEventListener('scroll', this.scrollHande)
    },
    // 清除scroll事件
    clearScroll() {
      window.removeEventListener('scroll', this.scrollHande)
    }
  },
  created() {
    this.RoomApi()
    this.bindScroll()
  },

  destroyed() {
    this.clearScroll()
  }