Question

我需要在标签栏中的一个标签完成加载后（在第一次点击之后）加载特定的JavaScript函数。我真的不明白如何使用onsen-ui tabbar（ons-tabbar）设置事件监听器，并且文档不是很清楚。

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

为了更清楚一点，我在这个特定的选项卡上使用persistent属性，所以基本上我只需要这个事件监听器就可以在首次打开选项卡时运行一次JS代码。但是，我不明白如何让once事件监听器工作......

Answer 1

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

有三种与事件相关的tabbar方法：on，once和off。这意味着使用它们的方式是myTabbar.on(...)。您也可以在该链接中看到他们的参数。此外，右下方还有三个tabbar事件。在这种情况下，我认为你想使用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()。

返回tabbar事件方法，因为您只需要使用特定选项卡触发功能，您需要过滤监听器内的选项卡。因此，如果您使用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(...)的第二个参数来删除你想要的确切监听器而不是其他监听器。

希望它有所帮助！

首次打开tabbar中的选项卡时调用函数（onsen-ui）

1 个答案: