[V2-Vue] Infinite Scroll ON TABS

how i can create infinite scroll ON TABS , for single page , i can add on f7-page , but on tabs i can put on f7-page , why ? because if tab1 already going bottom , i wont load more data on tab2 .

im using this on tab1 :

<f7-list media-list **infinite-scroll-content**>
      v-for="h in listhistory" 
      :title="'Date: ' + changedate(h.tgl_trx)" 
      :subtitle="'Total : ' + changecurrency(h.total)"
      :text="'Status : ' + status(h.status)">
      <div slot="after-start">
         <f7-button :href="'/detail/'+h.idtrx+'/'" outline small>Detail</f7-button>
      <div style="margin-left:10px;" slot="after">
         <f7-button v-if="h.status =='0'" :idtrans="h.idtrx" @click="cancelorder($event)" small color="red" fill>Cancel</f7-button>

but still cant catch infinite scroll .

the other case , im using without infinite-scroll-content on tabs, and put on f7-page,
like this :

<f7-page infinite :infinite-preloader="showPreloader" :infinite-distance="5" @infinite="loadMore" color-theme="red">

YES i can infinite scroll , but this is so ugly , sometimes data is not showing up while mounted and other words, i wont loadmore for whole tabs if only tab1 catch infinite scroll.


Refer to original example, where each tab is also has page-content class, add also infinite-scroll-content class to those tabs and it will work on each tab separately https://github.com/framework7io/framework7-vue/blob/master/kitchen-sink/src/pages/tabs-static.vue