Hello everyone.
I am currently developing a mobile app using F7 Vue v5 + cLI, with some Vue.js plugins and Cordova plugins, nothing too complicated.
So far everything looks to be working fine, when run and connect to live API’s to fetch data and perform some basic CRUD operations.
Upon development I am currently running all my test on chrome browser and all the F7 components work effectively, expect for occasional freezing of the app, which for me to reload the page.
I have ran
“npm run build-prod-cordova-android”
to generate the debug apk file so I can test on a live android device.
I downloaded and installed the app file on my android device, running android version 6.0 in developer mode.
Upon first instance the app seems fine, but when I continuously navigate between pages (I use tabbars and popup components alot), and API calls are made the app freezes, and eventually shows blank screens.
I have to restart it again, but even at that it repeats the same issue.
Is there something I am missing or is it because the app is not signed yet and from an unknown source, hence the reason it is acting up on live device.
Please kindly help me solve this issue.
Thanks you.
Hi,
I think that is something in your code. I use f7 since v1. I always test the app on my android device with debug apk, never had a problem. Also my app has + 100 pages and +200 calls to my backend. Never had that issue with the white screen. its hard to tell without some code.
1 Like
Hi @pvtallulah, thanks for your response.
As i said, I use tabbar as a point of entry into the app. And sometimes when i navigate between the tabs, i sometimes end up not responsive. This is the app interface below.
After the App.vue is called, the entry point of the app is below.
<template>
<f7-page name="template">
<!-- Views/Tabs container -->
<!--<f7-views tabs class="safe-areas">-->
<f7-toolbar tabbar labels bottom class="o-visible">
<f7-link tab-link="#view-home" tab-link-active icon-ios="f7:compass" icon-md="f7:compass" text="Explore"></f7-link>
<f7-link tab-link="#view-vacancies" icon-ios="f7:search" icon-md="f7:search" text="Vacancies"></f7-link>
<f7-link tab-link="#view-hostels" icon-ios="f7:placemark" icon-md="f7:placemark" text="Groups"></f7-link>
<f7-link tab-link="#view-profile" icon-ios="f7:person" icon-md="f7:person" text="Profile"></f7-link>
</f7-toolbar>
<f7-tabs>
<f7-tab id="view-home" class="page-content" tab-active @tab:show="tabActive('view-home')">
<div v-if="activeTab === 'view-home' ">
<HomeView />
</div>
</f7-tab>
<f7-tab id="view-vacancies" class="page-content" @tab:show="tabActive('view-vacancies')">
<div v-if="activeTab === 'view-vacancies' ">
<VacanciesView />
</div>
</f7-tab>
<f7-tab id="view-hostels" class="page-content" @tab:show="tabActive('view-hostels')">
<div v-if="activeTab === 'view-hostels' ">
<HostelsView />
</div>
</f7-tab>
<f7-tab id="view-profile" class="page-content" @tab:show="tabActive('view-profile')">
<div v-if="activeTab === 'view-profile' ">
<ProfileView />
</div>
</f7-tab>
</f7-tabs>
<!--</f7-views>-->
</f7-page>
So when i move between tabs, aftr much internal navigation, it doesn’t bring up the contents of each tabs again as it just stays on the current page, until i restart the app.
Am I suppose to be destroying some events that are opened when i call components within the pages i navigate to. Like I use popup and sheet modals alot.
maybe a router problem? did you debug your app on your mobile device? anye error there?
Didn’t see any error though.
ok, does your app become slow after navigation through tabs? sry, im trying to find out what may be the issue. also, if you are willing to share the apk, send me a PM.
found the bug, but without the source cant help.
the issue is when you click My bookings, there is a button current book…
here:
there is an error on the console. after that click, f7 router beaks, dont know why.
2 Likes
Oh…I see. Brilliant @pvtallulah
I was trying to route to another page onClick of that card component.
<f7-card class="p-6" style="border-radius: 2px" @click.native="goTo(booking_id)">
`----- content here ----`
methods: {
goTo(id) {
const vm=this;
vm.$f7router.navigate(`/my-bookings/${id}/`)
}
}
Could the reason be because of the @Click.native event?
Could it be. Why you use .native?
I will look into it and refactor.
Thank you for your time. I appreciate.
