Question

我正在尝试在我的应用程序中动态生成标签栏页面。我尝试使用ons.createElement()和document.createElement()生成元素。但是它不会渲染页面。仅标签栏，或第一页，而不是第二页。您知道如何在Onsen ui中动态渲染标签栏吗？

我正在使用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>

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

1 个答案: