Framework7 v3 - 如何触发标签显示

Question

我正在使用 F7 v3 并使用标签，但如何触发标签显示事件？

文档中是这样写的 "tab:show" https://framework7.io/docs/tabs.html 我尝试了这个但不起作用

  $$('#latest').on('tab:show', function() {
    app.alert('latest is visible');
  });

Answer 1

依赖于你的代码，错误可能发生在app.alert，所以你需要将其更改为纯警报或F7弹出，或者因为你为触发选项卡显示设置了错误的选择器而发生错误.请在此处查看此示例：

http://jsfiddle.net/w89xktne/

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>

app.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();
});

Framework7 v3 - 如何触发标签显示

Framework7 v3 - How to trigger tab show

html-framework-7