does anybody know how to make this sample code work?
<template>
<f7-app>
<f7-page :page-content="false">
<f7-navbar title="Swipeable Tabs" back-link="Back"></f7-navbar>
<f7-toolbar tabbar>
<f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
<f7-link tab-link="#tab-2">Tab 2</f7-link>
<f7-link tab-link="#tab-3">Tab 3</f7-link>
</f7-toolbar>
<f7-tabs swipeable>
<f7-tab id="tab-1" class="page-content" tab-active>
<f7-block>
<p>Tab 1 content</p>
...
</f7-block>
</f7-tab>
<f7-tab id="tab-2" class="page-content">
<f7-block>
<p>Tab 2 content</p>
...
</f7-block>
</f7-tab>
<f7-tab id="tab-3" class="page-content">
<f7-block>
<p>Tab 3 content</p>
...
</f7-block>
</f7-tab>
</f7-tabs>
</f7-page>
</f7-app>
</template>
What F7 and F7-Vue versions do you use?
I’m using version 3.6.2
I see your app structure is wrong, where is f7-view? http://framework7.io/vue/app-layout.html
my app structure is correct that is a component file, I’m compiling the files before usage
all other functions are working like when I change
<f7-tabs swipeable>
to
<f7-tabs animated>
the “animated” is working fine but the “swipeable” is not working
this is my app structure
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- CSRF Token -->
<meta name="theme-color" content="#ffffff">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Your app title -->
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/framework7.min.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="color-theme-gray">
<!-- App Root Element -->
<div id="app">
<app></app>
</div>
<!-- Scripts -->
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
do I have to initialize it or something?
btw I have an f7-view on my main app.js file
all other components of framework7 are working, I’m using a lot of components already but this swipeable tab is not working
This my current working code
I didn’t copy paste all the source code cause its almost 2k lines just the above tag so you have an idea if I have a mistake in the app layout
so at least you have an idea.
<template>
<f7-app :params="f7params">
<f7-statusbar></f7-statusbar>
<f7-view main>
<div v-if="ifReady">
<f7-page :page-content="false" :style="checkHeight()">
<f7-toolbar tabbar :bottom-md="isBottom">
<f7-link v-if="! ifReachUCPlanIsStandard" tab-link="#all-contacts-tab" tab-link-active>Presence</f7-link>
<f7-link tab-link="#pbx-account-tab">PBX Account</f7-link>
</f7-toolbar>
<f7-tabs animated>
<f7-tab v-if="! ifReachUCPlanIsStandard" id="all-contacts-tab" class="page-content" tab-active>
<f7-page>
Swipeable tabs require to be initialized on page init. It needs to init Swiper on them. Page init happens autmatically when it loaded by router or when it presented in View when it is loaded.
So first of all:
- remove v-if=“ifReady” from div before f7-page and move it better to parent View, e.g.
<f7-view main v-if="ifReady">
- i don’t like that you have f7-page under tab. Nested pages are not really supported
1 Like
I can’t do this
remove v-if=“ifReady” from div before f7-page and move it better to parent View, e.g. <f7-view main v-if="ifReady">
Since I’m showing a loading bar (div v-else) while I haven’t finished pulled all the data required.
is there a way to dynamically initialized it by myself?
Btw I tested it on a testing component with source code loaded on view instantly, it doesn’t work
maybe you can give a sample source code that works or how to initialize dynamically
btw also the f7-page under tab is needed by the contact list component. if I remove the f7-page the #-Z in the right side doesn’t stay fix.
do you know how to dynamically initialize it? cause that’s what I need though, the UI is not loaded instantly in my case.
Can you please setup a minimal JSFiddle with what example of what you are trying to achieve?
it will be hard since it depends on url queries to run and apis.
without it you wont even see the page load.
but I will try to make what the UI looks like after getting all the required data.
I’ll also explain what should happen and what is expected step by step
Are you using lazy-modules? remember to import swiper too.
sorry for the late replies I was really busy this past few weeks.
everything works except for this because its not loaded on page loaded.
the tags are loaded like 5 seconds after the data are being pulled.
that’s why I wanted to know how to manually initialized the animated function.