Я использую F7 v3 и использую вкладки, но как я могу вызвать событие отображения вкладок?
В документах написано так: «вкладка: показать» https://framework7.io/docs/tabs.html и я пробую это, но не работает
$$('#latest').on('tab:show', function() {
app.alert('latest is visible');
});
Зависимость вашего кода, ошибка может возникнуть в app.alert, поэтому вам нужно изменить ее на чистое оповещение или на всплывающее окно F7, или, возможно, ошибка возникла из-за того, что вы установили неправильный селектор для показа вкладки триггера. пожалуйста, посмотрите на этот пример здесь:
HTML-тело:
<body>
<!-- App root -->
<div id="app">
<!-- Views/Tabs container -->
<div class="views tabs">
<!--
Tabbar for switching views-tabs. Should be a first child in Views.
Additional "toolbar-bottom-md" class is also required here for MD theme
-->
<div class="toolbar tabbar-labels toolbar-bottom-md">
<div class="toolbar-inner">
<a href="#view-home" class="tab-link tab-link-active">1
<i class="icon icon-home"></i>
</a>
<a href="#view-catalog" class="tab-link">2
<i class="icon icon-catalog"></i>
</a>
<a href="#view-settings" class="tab-link">3
<i class="icon icon-settings"></i>
</a>
</div>
</div>
<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
<div id="view-home" class="view view-main tab tab-active">
Tab 1
</div>
<!-- Catalog View -->
<div id="view-catalog" class="view tab">
Tab 2
</div>
<!-- Settings View -->
<div id="view-settings" class="view tab">
Tab 3
</div>
</div>
</div>
...
</body>
приложение.js:
var $$ = Dom7;
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/about/',
url: 'about.html',
},
],
// ... other parameters
});
$$('.tab').on('tab:show', function() {
app.popup.create({
content: '<div class="popup">'+
'<div class="block">'+
'<p>Its Show.</p>'+
'<p><a href="#" class="link popup-close">Close me</a></p>'+
'</div>'+
'</div>',
}).open();
});
