Vue页面滚动到最底部，加载数据

首先判断当页面滚到底部的时候，并触发事件

    containerScroll() {
      let top = document.querySelector(".container").scrollTop;
      let height = document.querySelector(".container").scrollHeight;
      let clientHeight = document.querySelector(".container").clientHeight;

      //当滚动条滑到下面了 要请求数据
      this.scrollToEnd()
    }

    /**
     * 获取订单套餐信息
     */
    async getUserInvoice() {
      let params = {
        account_token: this.account_token,
        size: this.page_size,
        page: this.current_page
      };
      let { code, data } = await userService.userInvoice(params);
      if (code == userService.HTTP_SUCCESS_NET_CODE) {
        this.loading = true;
        this.scrollAbled = true;
        if (data.last_page == data.current_page) {
          this.scrollAbled = false;
          this.loading = false;
        }
        // 将滚动后新加载的数据与上一页数据拼接起来 concat
        if (data.list && data.list.length) {
          this.packageOrderData = this.packageOrderData.concat(data.list);
        }
      } else if (code == userService.HTTP_ERROR_NEW_CODE) {
        this.$emit("tokenExpired");
      }
    },

//滚动到页面底部的事件
async scrollToEnd() {
  if (this.scrollAbled && this.loading) {
    this.scrollAbled = false;
    this.loading = false;
    this.current_page++; // 页面+1
    await this.getUserInvoice();  // 更新数据
  }
}

这样就达到滚动加载的效果了