Scroll to the bottom of the Vue page to load the data

First determine when the page rolls to the bottom and fire the event

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

      // Request data when the scrollbar slides below
      this.scrollToEnd()
    }
Copy the code

    /** * get order package information */
    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 the newly loaded data after scrolling with the previous data
        if (data.list && data.list.length) {
          this.packageOrderData = this.packageOrderData.concat(data.list); }}else if (code == userService.HTTP_ERROR_NEW_CODE) {
        this.$emit("tokenExpired"); }},Copy the code

// Scroll to events at the bottom of the page
async scrollToEnd() {
  if (this.scrollAbled && this.loading) {
    this.scrollAbled = false;
    this.loading = false;
    this.current_page++; / / + 1 page
    await this.getUserInvoice();  // Update data}}Copy the code

That’s how it rolls