首次打开标签栏中的标签时调用函数 (onsen-ui)

Question

我需要在选项卡栏中的一个选项卡完成加载后（首次单击后）加载特定的 JavaScript 功能。我不太明白如何使用 onsen-ui 选项卡 (ons-tabbar) 设置事件侦听器，文档也不是很清楚。

基本上，我要做的是在其中一个页面上创建一些图表。选择 ons-tab 并加载部分内容时，将加载该页面。但是，我需要创建图表的 JavaScript 仅在页面加载后加载（JavaScript 查找元素以将图表定位在部分位置，因此我现在的问题是 JS正在首先加载并且未在部分中找到 html 元素，因为它们尚未加载）。如何创建一个事件侦听器来检测何时选择了一个选项卡以运行 JavaScript 的特定代码？

要更加清楚，我在此特定选项卡上使用persistent属性，因此，从本质上讲，我只需要此事件侦听器即运行 JS代码一次，当首次打开。但是，我不明白如何让 once 事件侦听器工作...

Answer 1

供参考：http://onsen.io/reference/ons-tabbar.html#methods-summary

与事件相关的tabbar方法有3种：on、once和off。这意味着使用它们的方式是 myTabbar.on(...)，例如。您也可以在 link 中看到它们的参数。此外，正下方是三个标签栏事件。在这种情况下，我想你想使用 postchange，对吧？

在您的 HTML 中，您创建了一个标签栏并将其分配给具有 var 属性的变量，我相信您已经知道：

<ons-tabbar var="myTabbar">
    <ons-tab page="tab0.html" label="Tab0" active="true"></ons-tab>
    <ons-tab page="tab1.html" label="Tab1"></ons-tab>
    <ons-tab page="tab2.html" label="Tab2"></ons-tab>
</ons-tabbar>

现在，您必须等到应用程序初始化并加载 Onsen UI 才能设置事件侦听器，您可以使用 ons.ready()。

回到标签栏事件方法，因为你只需要触发特定标签的功能，你需要在监听器中过滤标签。因此，如果您使用 myTabbar.once('postchange', ...)，无论您在内部设置的过滤器如何，侦听器本身都只会被触发一次，因此它可能会被其他选项卡触发，然后删除您想要的选项卡。在这种情况下你不能使用它。

相反，您可以使用 myTabbar.on('postchange', ...) 设置一个始终触发的侦听器，然后过滤内部的选项卡并仅在需要时使用 myTabbar.off('postchange') 删除侦听器。像这样：

ons.ready(function() {

  myTabbar.on('postchange', function(event) {

  // Only with the tab we want, we can use the index or the name
  if (event.index === 2) {

    console.log('postchange and do stuff with the tab');
    console.log(event.tabItem);

    // Delete this listener so it's only triggered the first time
    myTabbar.off('postchange');
  }

});

在这里工作：http://codepen.io/frankdiox/pen/QbYEaq

如果您在 postchange 上有其他监听器，您可以使用 myTabbar.off(...) 的第二个参数来删除您想要的确切监听器，而不是其他监听器。

希望对您有所帮助！

首次打开标签栏中的标签时调用函数 (onsen-ui)

Call function when a tab in tabbar is first opened (onsen-ui)

onsen-ui