如何在页面中动态创建 ons-tabbar

Question

我正在尝试在我的应用中动态生成标签栏页面。我尝试使用ons.createElement() 和document.createElement() 生成元素。但它不呈现页面。只有标签栏，或第一页，而不是第二页。你知道如何在 onsen ui 中动态渲染 tabbar 吗？

我正在使用 Onsen UI v2.10.8

非常感谢，祝你有美好的一天。

编辑我尝试的最后一个代码：

RenderTabButtons(view, $page, cb) {
    let data = [];
    let onsEle = `
      <ons-tab
        id="rdMainTab"
        page="rdMain.html"
        label="Main"
        icon="ion-home, material:md-home"
        active
      >
      </ons-tab>
    `;
    data.push(onsEle);
    let onsMapEle = null;
    if (view.mapVisible) {
      onsMapEle = `
        <ons-tab
          id="rdMapTab"
          page="rdDetailMap.html"
          label="Map"
          icon="ion-home, material:md-home"
        >
        </ons-tab>
      `;
      data.push(onsMapEle);
    }

    let wrap = `
      <ons-tabbar
        swipeable
        position="auto"
        id="reservation-detail-tabbar"
        class="x-margin-top"
      >`;
    for (let a = 0; a < data.length; a++) {
      wrap += data[a];
    }
    wrap += '</ons-tabbar>';

    $page[0].appendChild(ons.createElement(wrap));
    cb();
  }

Answer 1

是的，效果很好。只需将其附加到类名为“tab-bar”的元素上，不要忘记在元素上运行 ons.compile()：

var $tab = $('<ons-tab  label="Label" ></ons-tab>');
$('.tab-bar').append($tab);
ons.compile($tab[0]);



<ons-tabbar>
  <ons-tab label="Tab 1" active></ons-tab>
  <ons-tab label="Tab 2"></ons-tab>
</ons-tabbar>