Ais-infinite-hits: Auto-scroll 2 pages, then load with button


The current behaviour of <ais-infinite-hits> is that you have to click each time to load the next results page.

I’m looking to achieve this behaviour; Infinite load 2 pages, then give the user the choice to load 2 more pages everytime via a button.

Here is some example done with Vue-infinite-loading.

Is there a way to achieve the same thing with <ais-infinite-hits>?

Hi @wassimdotis
You can try wrapping the refineNext method provided in infiniteHits in your own refine method than call it when relevant (similar to your infiniteHandler) method.

    <template slot-scope="{ items, refineNext }">
        <div v-for="item in items" :key="item.objectID">

       <button @click="withCustomLogic(refineNext)">Show more results</button>

export default {
  data() {
    return {
      withCustomLogic(refineNext) {
        return refineNext();

This helper can combine with the infiniteHandler helper used in your vue-infinite-loading example.