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

Hello,

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>
  <ais-infinite-hits>
    <template slot-scope="{ items, refineNext }">
        <div v-for="item in items" :key="item.objectID">
          {{item.name}}
        </div>

       <button @click="withCustomLogic(refineNext)">Show more results</button>
    </template>
  </ais-infinite-hits>
</template>

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

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