Framework7：从Tab动态加载组件页面

Question

我刚刚找到 Framework7，它看起来很有希望作为移动应用程序的基础。

我可以从导航选项卡加载具有动态数据的组件页面。但是此数据仅在加载应用程序时设置。

求职：

每次用户单击选项卡时，加载数据并呈现页面。

问题: 如何让组件页面每次都加载？

我从framework7-template-tabs做了一个例子。检查调用 pageInit 时显示的控制台。

直播:

http://f7-navigate-component-question.surge.sh/

代码:

https://github.com/gotling/framework7-tab-component-page-question

Answer 1

如果您希望每次特定选项卡 clicked/loaded 时都发生某些操作，您可以使用选项卡的 show 事件，记录在 here .

例如，要在每次加载 tab2 时发出提示，您可以这样做

$$("#tab2" ).on( "show", function( event, ui ) {
    myApp.alert("Tab loaded!");
} );

Answer 2

我在 Framework 7 forum 中得到了答案。

监听页面显示事件：

$('#view-catalog').on('tab:show', ...

刷新页面：

$('#view-catalog').on('tab:show', function () {
  catalogView.router.navigate(catalogView.router.currentRoute.url, {
    reloadCurrent: true,
    ignoreCache: true
  });
});

如果使用 Framework7 2.0.6 或更新版本，可以通过以下方式简化：

$('#view-catalog').on('tab:show', function () {
  viewCatalog.router.refreshPage();
});

Framework7：从Tab动态加载组件页面

Framework7: Dynamically load Component page from Tab

tabs

components

html-framework-7