Controlling repeater load

Hi, How can i set my repeater to load each time 4 items when i scroll down? like in this web site:
https://eduardo.nadlan-neto.net/he

Have a read of this previous post.
https://www.wix.com/corvid/forum/community-discussion/auto-load-content-on-scroll-down

Tnx but the link that the guy said he solved his problem for dosent works : /

https://www.wix.com/code/home/forum/questions-answers/about-page-loading

@oribibas77789 Like this?
https://skeptisch.wixsite.com/website-6/infinite-scroller

@skmedia Exactly!

@oribibas77789 here’s something you can do:

let portion = 10;//the number of items per each load
let start = 0;
let stop = portion;
$w.onReady(function () {
    $w("#repeater1").data = data.slice(start, stop);
    $w("#repeater1").onItemReady(($i, iData, inx) => {
       $i("#container1").onViewportEnter((event) => {
 if (inx === $w("#repeater1").data.length - 1){
                stop += portion;
                $w("#repeater1").data = data.slice(start, stop);
                }
            })
    })
});

@jonatandor35 I have this solution:

My question is, how can i show a loading gif for the duration of the loading, then hide it once it loads more…?

export function box1_viewportEnter(event) {
 //Add your code for this event here: 
   $w("#dataset1").loadMore() 
   .then( () => {       
   console.log("Done loading more data"); 
     });
 
}

@contact53319 :

export function box1_viewportEnter(event) {
 $("#gifLoader").expand();
   $w("#dataset1").loadMore() 
   .then( () => {   
   $w("#gifLoader").collapse(); 
     });
 
}
//you can use show() and hide(), but  think collapsing is better, just make sure it's collapsed on load and not hidden on load.

@jonatandor35 It dosent work :confused:

@oribibas77789 It worked for me:
https://jonatandor35.wixsite.com/test/endless-scroll

Maybe y didn’t retrieve the data (?)

@jonatandor35 I can see on the log that the code work but it wont load any more items.
can you send me you full code?

@oribibas77789 here you go:

//fake data for demo
let data = [];
data.length = 3000;
data.fill(0, 0, 3000);
data = data.map((e, index) => { return { _id: index.toString() } });
//end of fake data creation
let portion = 10;//the number of items per each load
let start = 0;
let stop = portion;
$w.onReady(function () {
    $w("#repeater1").data = data.slice(start, stop);
    $w("#repeater1").onItemReady(($i, iData, inx) => {
        $i("#text1").text = iData._id;
            $i("#container1").onViewportEnter((event) => {
 if(inx === $w("#repeater1").data.length -1){
                stop += portion;
                $w("#repeater1").data = data.slice(start, stop);
                }
            })
    })
});

@jonatandor35 Tnx bro

@oribibas77789 You’re welcome. Good luck

@jonatandor35 I not so good in coding, i have a database of items, so instaned of the “fake data” i should put the key for my dataset?

@oribibas77789 are you using a collection direct query or a dataset?

@jonatandor35 a dataset

this is my search code (sry for the mass) :

export function search2 () {

$w(‘#repeater1’).hide();

let nDataV = wixData.query(‘search’);
let nDataV2 = wixData.query(‘search’);

   nDataV2.contains('name', $w("#searchBar").value) 
    .or(nDataV2.contains('neigborhood', $w("#searchBar").value)) 
    .or(nDataV2.contains('nameH', $w("#searchBar").value)) 

.or(nDataV2.contains(‘nameH2’, $w(“#searchBar”).value))
.or(nDataV2.contains(‘neigborhoodH’, $w(“#searchBar”).value))
.and(nDataV2.contains(‘typeSOrR’, $w(“#typeBar2”).value))
.and(nDataV2.contains(‘type’, $w(“#typeBar”).value))
// .between(‘price1’, $w(“#minPrice”).value, $w(“#maxPrice”).value)
.and(nDataV.ge(‘price1’, $w(“#minPrice”).value))
.and(nDataV.le(‘price1’, $w(“#maxPrice”).value))
.and(nDataV2.ge(‘rooms1’, $w(“#minRooms”).value))
.and(nDataV2.le(‘rooms1’, $w(“#maxRooms”).value))
.and(nDataV2.ge(‘floor1’, $w(“#minFloor”).value))
.and(nDataV2.le(‘floor1’, $w(“#maxFloor”).value))
.and(nDataV2.ge(‘sqm2’, $w(“#minSqm”).value))
.and(nDataV2.le(‘sqm2’, $w(“#maxSqm”).value))
.ascending(‘titleH’)
.find()

    .then(res => { 

    $w('#repeater1').data = res.items 
    console.log(res); 

if (res !== null ) {

        $w('#repeater1').show("fade"); 
        $w("#repeater1").expand(); 

if (res.items.length === 0) {

             $w("#repeater1").collapse(); 
              $w("#group27").show("fade"); 


                setTimeout(() => { 

            $w("#group27").hide("fade"); 


        }, 2500) 


        } 

else {

            $w("#group27").hide("fade"); 


        }       

   }  
    }); 
    }

@oribibas77789 but your search code doesn’t use a dataset… and the code for the endless scroll is different if it’s a dataset or a query.
Anyway the principle is:

  1. if it’s a collection query. Use the query results.items instead of the data variable (in my code).
  2. if it’s a dataset, you have 2 options:
    2a. disconnect the dataset from the repeater (on the editor); get the dataset items (getItems()) then use the results instead of my data variable.
    2b. Leave it connected on the editor, and use the dataset.loadMore() method.

@jonatandor35 just change this line :

$w(“#repeater1”).data = data.slice(start, stop);

to this line:

$w(‘#repeater1’).data = res.items(start, stop);

?

or you meaning to the fake data?