Virtuallist doesn't render instant

Questions
1

Hello,

I have a virtuallist on a different tab on a different view then my main view. When my app is loaded and I click on the tab button the virtuallist is not rendered but when I load my app in this view the virtuallist is rendered. When I switch between tabs the virtuallist is also rendered.

Does anyone have any experience with this?

I also tried virtualList.update(); but this only seems to work when the tab is shown.

I want to have the virtuallist rendered before I switch to this tab/view so the list is already displayed.

var recordsPRList = f7app.virtualList.create({
	el: '#tabpr .virtual-list',
	items: $.parseJSON(localStorage.getItem('PR')),
	itemTemplate:
	'<li>' +
	  '<a href="#" class="item-link item-content">' +
		'<div class="item-inner">' +
		  '<div class="item-title-row">' +
			'<div class="item-title">{{name}}</div>' +
		  '</div>' +
		  '<div class="item-subtitle">{{weight}}</div>' +
		'</div>' +
	  '</a>' +
	'</li>',
});
2

Would be good to see full related code, including HTML where it is located.

3

I use “Tabbed Views” from F7 templates page and on tab two I use the Tabs component.
I just have my own js file where I call the virtuallist beneath

$(document).ready(function() {

Here is a part of my index.html:
> 

  			<div class="tabs-swipeable-wrap">
  				<div class="tabs">
  					<div class="page-content tab tab-active" id="tabpr">
  						<div class="wait">
  							<div class="block">
  								<div class="col text-center">
  									<img src="images/Logo_loading.gif" class="img-sm"/>
  									<p><i class="fa fa-spinner fa-spin fa-fw"></i> <script>document.write(langfile.loading);</script></p>
  								</div>
  							</div>
  						</div>
  						<div class="show hidden">
  							<div class="list virtual-list searchbar-found no-hairlines-between sortable">
  								<!-- keep it empty -->
  							</div>
  							<div class="block searchbar-not-found">
  								<div class="block-inner">
  									<script>document.write(langfile.search_error_nothing);</script>
  								</div>
  							</div>
  						</div>
  					</div>
  					<div class="page-content tab" id="tabwod">
  						<div class="wait">
  							<div class="block">
  								<div class="col text-center">
  									<img src="images/Logo_loading.gif" class="img-sm"/>
  									<p><i class="fa fa-spinner fa-spin fa-fw"></i> <script>document.write(langfile.loading);</script></p>
  								</div>
  							</div>
  						</div>
  						<div class="show hidden">
  							<div class="list searchbar-found no-hairlines-between sortable">
  								<ul></ul>
  							</div>
  							<div class="block searchbar-not-found">
  								<div class="block-inner">
  									<script>document.write(langfile.search_error_nothing);</script>
  								</div>
  							</div>
  						</div>
  					</div>
  				</div>
  			</div>

And my virtuallist create:

var recordsPRList = f7app.virtualList.create({
		el: '#tabpr .virtual-list',
		items: $.parseJSON(localStorage.getItem('PR')),
		itemTemplate:
		'<li>' +
		  '<a href="#" class="item-link item-content">' +
			'<div class="item-inner">' +
			  '<div class="item-title-row">' +
				'<div class="item-title">{{name}}</div>' +
			  '</div>' +
			  '<div class="item-subtitle">{{weight}}</div>' +
			'</div>' +
		  '</a>' +
		'</li>',
	});

Before I used a normal list and this was working fine but I recently switched to a virtuallist but the rendering only seems to work when you watch the page where the virtuallist is at the same time.
The virtuallist does not seem to get rendered when I am in a different view.

4

Never mind, scrolling got really slow so I stopped using virtuallist and went back to regular list.
You may close this topic because I can’t

5

Как раз наоборот, для больших данных нужно использовать Virtual List - он прекрасно работает с большим количеством записей. Обычный список точно даст тормоза.