quasar/src/components/infinite-scroll/QInfiniteScroll.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/infinite-scroll"
  },

  "props": {
    "offset": {
      "type": "Number",
      "desc": "Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance",
      "default": 500,
      "category": "behavior"
    },

    "debounce": {
      "type": [ "String", "Number" ],
      "desc": "Debounce amount (in milliseconds)",
      "default": 100,
      "category": "behavior"
    },

    "initial-index": {
      "type": "Number",
      "desc": "Initialize the pagination index (used for the @load event)",
      "default": 0,
      "category": "behavior"
    },

    "scroll-target": {
      "extends": "scroll-target"
    },

    "disable": {
      "extends": "disable"
    },

    "reverse": {
      "type": "Boolean",
      "desc": "Scroll area should behave like a messenger - starting scrolled to bottom and loading when reaching the top",
      "category": "behavior"
    }
  },

  "slots": {
    "default": {
      "extends": "default"
    },

    "loading": {
      "desc": "Slot displaying something while loading content; Example: QSpinner"
    }
  },

  "events": {
    "load": {
      "desc": "Emitted when Infinite Scroll needs to load more data",
      "params": {
        "index": {
          "type": "Number",
          "desc": "The index parameter can be used to make some sort of pagination on the content you load. It takes numeric values starting with 1 and incrementing with each call"
        },
        "done": {
          "type": "Function",
          "desc": "Function to call when you made all necessary updates. DO NOT forget to call it otherwise your loading message will continue to be displayed",
          "params": {
            "stop": {
              "type": "Boolean",
              "desc": "Stops QInfiniteScroll if it's Boolean 'true'; Specify it in case there's nothing more to load"
            }
          },
          "returns": null
        }
      }
    }
  },

  "methods": {
    "poll": {
      "desc": "Checks scroll position and loads more content if necessary"
    },

    "trigger": {
      "desc": "Tells Infinite Scroll to load more content, regardless of the scroll position"
    },

    "reset": {
      "desc": "Resets calling index to 0"
    },

    "stop": {
      "desc": "Stops working, regardless of scroll position"
    },

    "resume": {
      "desc": "Starts working. Checks scroll position upon call and if trigger is hit, it loads more content"
    },

    "setIndex": {
      "desc": "Overwrite the current pagination index",
      "params": {
        "newIndex": {
          "type": "Number",
          "desc": "New pagination index",
          "required": true
        }
      }
    },

    "updateScrollTarget": {
      "desc": "Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes"
    }
  }
}