irabba
April 5, 2020, 3:18pm
1
Dears
I have A list of swipteout Items, the function is of swipeleft or swiperight is working fine, as long as the number of items in the list is few the page performance is working fine, if the number of items goes more than 100 or 200 Items the performance of the page is very slow
can you advise if any specific practice I have to make when using the swipeout list in order not to affect the performance?
Thanks
plpl
April 5, 2020, 3:29pm
2
usually the performance is determined by your device
rather than the your code
try virtual-list
see if it makes any change
https://framework7.io/docs/virtual-list.html
irabba
April 5, 2020, 3:35pm
3
Thanks for the response, do virtual list has the same properties and methods as swipeout list?
plpl
April 5, 2020, 3:41pm
4
yes
app.virtualList.create({
// params
itemTemplate:'<li class="swipeout"><!--swipeout-content--></li>'
});
irabba
April 5, 2020, 3:55pm
5
Actually I’m creating the complete DOM object with all the swipeout list objects before the page is loaded, so could it be the main issue?
plpl
April 5, 2020, 4:07pm
6
no
it’s not related to your issue
huge dom tree may only create issue with the transition
when you navigate-to-route
you better insert the els in dom on “pageInit”
irabba
April 5, 2020, 7:18pm
7
Actually also I have the slowness behavior when I’m trying to Open the list item detail page
Item list details is a route with component template
Code as below
routes: [
{
path: '/inbox-details/:inboxId',
component: {
template: `
<div class="page">
<div class="page-content" style="background-color: var(--f7-block-strong-bg-color)">
<div class="list media-list">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-row">
<div class="item-title" style="white-space: normal;"> {{itemTitle}}</div>
<div class="item-after">
{{#if markAsUnRead}}
<i class="new-unread-message" id="popup-read-unread"></i>
{{/if}}
{{#if markAsRead}}
<i class="new-read-message" id="popup-read-unread"></i>
{{/if}}
</div>
</div>
<div class="item-row">
<div class="item-subtitle" style="white-space: normal;"> {{itemSubTitle}}</div>
<div class="item-after" style="white-space: normal;">{{itemDate}}</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block" style="overflow: auto;"><p id="routerMessageDetailsID"> {{itemText}}</p></div>
</div>
<div class="popover popover-extra-links-sub">
<div class="popover-inner">
<div class="list">
<ul>
{{#if markAsRead}}
<li><a class="list-button item-link extra-options-Filters popover-close" id="markAsReadSubMenuSub" @click="markAsReadButtonClick" href="#">
label.field.messagecentercompose.markAsRead
</a></li>
{{/if}}
{{#if markAsUnRead}}
<li><a class="list-button item-link extra-options-Filters popover-close" id="markAsUnReadSubMenuSub" @click="markAsUnReadButtonClick" href="#">
label.field.messagecentercompose.markAsUnRead
</a></li>
{{/if}}
<li><a class="list-button item-link extra-options-Filters popover-close" id="deleteSubMenuSub" @click="deleteButtonClick" href="#" >
label.field.messagecentercompose.delete
</a></li>
</ul>
</div>
</div>
</div>
</div>
`,
data: function () {
var param = this.$route.params.inboxId;
return {
itemTitle: $$('#'+param).find('.item-title')[0].innerText,
itemDate: $$('#'+param).find('.item-after')[0].innerText,
itemSubTitle: $$('#'+param).find('.item-subtitle')[0].innerText,
itemText: $$('#'+param).find('.item-text')[0].innerHTML,
itemInner: $$('#0'+param).find('.item-inner')[0],
markAsRead: $$('#read-unread-'+param).hasClass('new-read-message'),
markAsUnRead: $$('#read-unread-'+param).hasClass('new-unread-message'),
selInboxItem: this.$route.params.inboxId,
}
},
methods: {
markAsReadButtonClick: function () {
this.$setState({markAsRead: false});
this.$setState({markAsUnRead: true});
this.$root.markAsReadUnRead(this.$route.params.inboxId);
$$('#popup-read-unread').removeClass('new-unread-message');
$$('#popup-read-unread').addClass('new-read-message');
},
markAsUnReadButtonClick: function () {
this.$setState({markAsRead: true});
this.$setState({markAsUnRead: false});
this.$root.markAsReadUnRead(this.$route.params.inboxId);
$$('#popup-read-unread').removeClass('new-read-message');
$$('#popup-read-unread').addClass('new-unread-message');
},
deleteButtonClick: function () {
var idx = this.$route.params.inboxId;
this.$f7.dialog.confirm('message.confirmation.messagecentersentitems.DeleteConfirmationItem','label.section.messagecentersentitems.Delete', function () {
//call the server
app.swipeout.delete($$('#'+idx));
app.views.main.router.back();
});
},
},
on: { pageBeforeIn: function (e, page) {
this.$root.getMessageDetails(this.$route.params.inboxId);
setPageState('message-detail');
},
pageAfterIn: function (e, page) {
if($$('#read-unread-'+this.$route.params.inboxId).hasClass('new-unread-message')){
this.$root.markAsReadUnRead(this.$route.params.inboxId);
}
},
pageBeforeRemove: function (e, page) {
setPageState('root');
},
},
},
},
plpl
April 5, 2020, 7:45pm
8
the code is a little bit messy (for me)
i don’t really understand what’s going on
maybe some more input about the parent page will help
and for your question:
yes
a huge dom tree will also impact the performance of the next-page
since the transition apply also on the previous-page
virtual-list is your way to go
irabba
April 5, 2020, 9:03pm
9
Thanks for your prompt response, I just give it a try for the virtual list, performance now is way much better, but I lost the search functionality,
My old search bar code as below
<form class="searchbar searchbar-expandable">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button if-not-aurora" style="display: block; margin-right: 0px;">
<layout:message key="label.button.common.cancel" layout="false"/>
</span>
</div>
</form>
also I included the below code in my page
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if ( (items[i].subCatDesc.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') ||
(items[i].subtitle.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') ||
(items[i].content.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') ) {
found.push(i);
}
}
return found; //return array with mathced indexes
},
I don’t know how to link both search
plpl
April 5, 2020, 9:17pm
10
take a look how it’s done here: