I am encountering issues with the iOS app while developing both android and iOS apps with Framework7-vue. The Android app functions smoothly, but the iOS app is causing trouble.
One of the features include a popup functionality with an accordion inside for users to view. However, the animation on iOS is extremely slow and unattractive. Despite my attempts and online research, I have not been able to resolve this issue.
Below is the implementation of the app.js and a snippet showcasing the popup. Any suggestions will be greatly appreciated, thank you.
app.js
const questions = {
questionOne: 'Does the subject have a high CCA?',
options: {
yes: 'Yes',
no: 'No'
},
selected: {
yes: {
questionTwo: 'High PTH and yes to high CCA',
options: [
'PTH > 80pmol/L',
'PTH < 80pmol but > 50pmol/L and increasing',
'PTH < 50 but higher than baseline'
]
},
no: {
questionTwo: 'PTH > 80pmol/L',
options: [
'Refer for surgical parathyroidectomy',
'Start Cinacalcet if parathyroidectomy is required'
]
}
}
}
Vue.use(Framework7Vue);
// Page Component Initialization
Vue.component('page-education', {
template: '#page-education'
});
// Device Ready Event Handling
document.addEventListener('deviceready', () => {
console.log("DEVICE IS READY!");
}, false)
// Application Init
const mainApp = new Vue({
el: '#app',
data: {
popupOpened: false,
navBarShowing: true,
showingGreenCard: false,
currQuestion: questions.questionOne,
currOptCount: 2,
currOptions: questions.options,
showing: false,
isShowing: true,
icon: "<i class='far fa-file-alt'></i>",
homeIcon: "<i id='sidemenu-icon' class='fas fa-home'></i>",
pencilIcon: "<i id='sidemenu-icon' class='fas fa-pencil-alt'></i>",
healthIcon: "<i id='sidemenu-icon' class='fas fa-plus'></i>",
algIcon: "<i id='sidemenu-icon' class='fas fa-align-justify'></i>",
dietIcon: "<i id='sidemenu-icon' class='fas fa-utensils'></i>",
clipIcon: "<i id='sidemenu-icon' class='far fa-clipboard'></i>",
linkIcon: "<i id='sidemenu-icon' class='fas fa-link'></i>"
},
progress: {
value: 10
},
methods: {
setInlineProgress: function(value) {
this.value = value;
const self = this;
const app = self.$f7;
app.setProgressbar('#demo-inline-progressbar', this.value);
},
toHomeScreen: function() {
this.$f7.getCurrentView().router.back({ pageName: 'home-page', force: true, refreshPrevious: true });
this.$f7.closePanel();
},
shouldShow: function() {
this.showing = true;
},
generateQuestion: function(answer) {
this.currQuestion = questions.selected.yes.questionTwo;
this.optionsOne = 'Yes';
this.optionTwo = 'No';
this.shouldShow();
},
showPopUp: function(e) {
this.showingGreenCard = true;
},
closePopUp: function() {
this.showingGreenCard = false;
},
},
// Framework7 Initialization Parameters
framework7: {
root: '#app',
material: true,
routes: [
{
path: '/',
name: 'home'
},
...
],
}
});
Popup Snippet:
<div class="popup-card-four" v-if="mainApp.showingGreenCard"> <p class="popup-text">Suitable low phosphate foods</p> <i id="close-icon" @click="mainApp.closePopUp()" class="far fa-times-circle"></i><f7-list class="main-acc-list" accordion-list> <f7-list-item id="acc-one-title" accordion-item title="Lower phosphate dairy"> <f7-accordion-content class="table-wrapper"> <f7-block > <table class="main-table"> ... <!-- Table Content --> </table> </f7-block> </f7-accordion-content> </f7-list-item> ... <!-- More List Items --> </f7-list> </div>