Hello,
I use framework v4 and added virtual list with infinite scroll. This works fine until I am scrolled al the way down and want to go up realy fast. Nothing is displayed anymore and the user needs to close and open the app to continue.
Any suggestions on how to prevent this?
See this video which I made with my iphone X:
use my page with infinite scroll, forme work very good.
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title" style="text-transform:uppercase;">{{Name}}</div>
</div>
</div>
<div class="page-content infinite-scroll-content" data-infinite-distance="50" @infinite="loadMore">
<div class="row list media-list" >
{{#each @root.LastLoad}}
<div class="col-50 tablet-33 desktop-25">
<a href="/{{type.type_name}}/id/{{id}}/"><div class="card demo-card-header-pic">
<div style="background-image:url( {{cover}} )" class="card-header align-items-flex-end lazy">
<small> {{title}} </small>
</div>
<i class="icon f7-icons size-12">eye</i> <small style="font-stretch: all;">{{views}}</small><span style="color: green;"><i class="icon f7-icons size-12">arrow_up</i> <small style="font-stretch: all;">{{likes}}</span></small>
<span style="color: red;"><i class="icon f7-icons size-12">arrow_down</i> <small style="font-stretch: all;">{{dislikes}}</span></small>
</div></a>
</div>
{{/each}}
{{#if @root.hasMoreItems}}
<div class="preloader infinite-scroll-preloader"></div>
{{/if}}
</div>
</div>
Dopey, have a look at the before and after parameters for the virtual list.
My virtuallist:
// Virtual List
VLViewRecords = f7app.virtualList.create({
el: ".VLViewRecords",
items: $.parseJSON(LastRecords),
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
return found;
},
itemTemplate:
'<li data-dbid="{{dbid}}">'+
'<a href="{{url}}" class="item-link item-content">'+
'<div class="item-media"><img src="{{img}}" class="badge-mdsmall"></div>'+
'<div class="item-inner">'+
'<div class="item-title">'+
'{{name}}'+
'<div class="item-header">{{date}}</div>'+
'</div>'+
'<div class="item-after">{{score}}</div>'+
'</div>'+
'</a>'+
'</li>',
height: 88 // Height of items
});
// Remove preloader below ten items
if ($.parseJSON(LastRecords).length < 10) {
$("#view-records .infinite-scroll-preloader").addClass("hidden");
}
And how I fill infinite scroll:
// Infinite Scroll
// Loading flag
var allowInfinite = true;
// View Records
// Set Start Number
var VLViewRecordsNum = 10; // First LoadLastRecords loaditem = Startnumber
var VLViewRecordsLoadItems = 10;
// Attach 'infinite' event handler
$$('#view-records .infinite-scroll-content').on('infinite', function () {
// Exit, if loading in progress
if (!allowInfinite) return;
// Set loading flag
allowInfinite = false;
// Set variable to wait for items
WaitLastRecords = 0;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
allowInfinite = true;
// Parse Array
var ArrLastRecords = $.parseJSON(LastRecords);
// Load Items, start after last timestamp
LoadLastRecords(localStorage.getItem('Session'),sessionmeasure,VLViewRecordsLoadItems,"Load",ArrLastRecords[ArrLastRecords.length - 1].timestamp,localStorage.getItem('Lang'));
// Period check if items are loaded
var Interval = window.setInterval(function(){
// If loading is done
if (WaitLastRecords === 1) {
// Stop checking
clearInterval(Interval);
// If no items are returned exit infinite scroll
if (LastRecords === "null") {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
f7app.infiniteScroll.destroy('#view-records .infinite-scroll-content');
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
} else {
// Append new items to Virtual List
VLViewRecords.appendItems($.parseJSON(LastRecords));
// Change Startnumber for next load
VLViewRecordsNum = VLViewRecordsNum + VLViewRecordsLoadItems;
// Show scroll if hidden
$("#view-records .infinite-scroll-preloader").removeClass("hidden");
}
}
}, 1000);
}, 1000);
});
I hope this helps
please debug real Height when it render (must include padding and margin of list.
It will happen when Height not right.
Thanks, but i’ve checked and my list item is exactly 88px height. List item is 86px with 2px margin at the bottom. When I change the virtuallist height parameter to 86 the whole list is displayed incorrect.
When I debug in the browser I see the first X items are all gone when I scroll far to the bottom with infinite scroll and then scroll back up.
The item with split jerk is now the first item after <ul>
any suggestions?
Just saw your code that you have load infinite more than 1 , normally you can use just one only
not so sure if this effect.
Please tell me where I open more than one? I believe I use it one time only and only in this view. I really need to have this fixed. I used the example from framework7 page.
It was my mistake I just saw you have set interval and timeout.
The strange thing is the first items get removed from the list as I scroll all the way down.
I notice only 32 items are in virtual list. When I scroll down and reach 32 items the first items get removed and the next items load. There are only 32 items shown in html. Is this normal behavior for the virtual list?
Should the first items appear when I scroll back up or do I have to code this?
Just solved my issue by changing the virtual list to a simple list. It did not work for me with a virtual list because the top items are removed when scrolling.
