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
@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 
@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:
- if it’s a collection query. Use the query results.items instead of the data variable (in my code).
- 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?