Hi,
This is my first time using Framework 7, it has been great but couldn’t figure out how to setup virtual list.
I have a virtual list in home page, when i go to page 2 and return to home page again the virtual list disappears.
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="/page2/" class="link icon-only">
<i class="icon icon-back"></i>
</a>
</div>
<div class="title">Title</div>
<div class="right">
<a href="#" class="link icon-only">
<i class="icon icon-back"></i>
</a>
</div>
</div>
</div>
<div class="toolbar tabbar toolbar-top">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">Templates</a>
<a href="#tab-2" class="tab-link">Favourites</a>
</div>
</div>
<div class="tabs">
<div id="tab-1" class="page-content tab tab-active">
<div class="list virtual-list media-list"></div>
</div>
<div id="tab-2" class="page-content tab">
<div class="block">
<p>tab 2</p>
</div>
</div>
</div>
</div>
</div>
And my js
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'md',
id: 'com.myapp.test',
panel: {
swipe: 'left',
},
routes: [{
path: '/',
url: './index.html',
},
{
path: '/page2/',
url: './tpl/page2.html'
}
]
});
var mainView = app.views.create('.view-main');
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
var virtualList = app.virtualList.create({
el: '.virtual-list',
items: items,
itemTemplate: '<li>' +
'<a href="#" class="item-link item-content">' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">{{title}}</div>' +
'</div>' +
'<div class="item-subtitle">{{subtitle}}</div>' +
'</div>' +
'</a>' +
'</li>',
height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46)
});
Because when you go away from home page, it has been removed. You need to move your VL creation logic into pageInit event for home page, something like
routes: [
{
path: '/',
url: './index.html',
on: {
pageInit(e, page) {
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
var virtualList = app.virtualList.create({
el: '.virtual-list',
items: items,
itemTemplate: '<li>' +
'<a href="#" class="item-link item-content">' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">{{title}}</div>' +
'</div>' +
'<div class="item-subtitle">{{subtitle}}</div>' +
'</div>' +
'</a>' +
'</li>',
height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46)
});
}
}
},
Thanks mr nolimits4web , am sorry for reviving this topic but am facing the same problem except that its quite different.
When i navigate to the second page and back to home screen the content is there.
The problem is navigating to the third page ie home to second page then to third.
From third coming to home the content on the home disappears
class Data {
// method to get data here
async getMovieData() {
// fetch logic here that returns data
}
}
class UI {
constructor(app, data) {
this.data = data;
this.app = app;
}
// ui methods here
// since i have tabbed views i created view instance for each tab and initialized them separately.
// this is the instance for the main view
movies() {
this.app.views.create('#mymovies', {
// on page init i ran my methods to render data for this view
on: {
pageInit: (event) => {
// since this event was firing everytime i loaded or navigated to page in this view , i added a conditional statement to ensure that the rendering logic works only the first time i load the main view page
if (event.name = "my-view-1-page-name") {
// so i added my logic to render everything here page init for the view main
}
}
}
})
}
// like wise for view 2 but fir view 2 i wanted it to initialize once it becomes visible so i added the "initRouterOnTabShow" view parameter
shows() {
this.app.views.create('#myshows', {
initRouterOnTabShow: true,
on: {
// added here page init logic just like the view 1
}
})
}
// my click handler here
clickHandler(event) {
// the first target checked if user clicked on more link which was to navigate to a router component called more
if (target.classList.contains('more_links')) {
// first i get data to for that specific link and pass it to more component
// i navigate grace fully and it works.The more component dispalys movies for a specific category
app.views.current.router.navigate('/more/', { props: { /* data to consume on more page here */ } });
}
// the second checked if i clicked on poster and navigated to details page
else if (target.classList.contains('poster')) {
// logic to get media object here and pass it for consuming
app.views.current.router.navigate("/movie_details/", { props: { mediaObj } });
}
}
}
// waited for the dom content to load to kick things into gear
document.addEventListener('DOMContentLoaded', () => {
var data = new Data();
data.getMovieData()
.then((data) => {
var ui = new UI(app, data)
ui.movies();
ui.shows();
return ui;
})
// Aha, that's it for the general strucuture summary now here comes the question if you need more info about the layout pliz let me know.
// So after there i used event delegation to add event listener for all my content since it was added dynamically all in one method in the second then block below
.then((ui) => {
// i added the listener for to the view since it was a common parent container for all my views
$$('.view').on('click', (event) => {
ui.clickHandler(event);
});
})
})