Question

这是我的codepen http://codepen.io/anon/pen/JGpdvW。这里是代码：

<ons-list class="filtri">
    <ons-list-item>
        <ons-row>
            <ons-col width="40px">
                <ons-icon icon="fa-volume-down" class="lower"></ons-icon>
            </ons-col>
            <ons-col class="range-wrapper">
                <input type="range" min="0" max="18" value="10" class="range">
            </ons-col>
            <ons-col width="40px">
                <ons-icon icon="fa-volume-up"></ons-icon>
            </ons-col>
        </ons-row>
    </ons-list-item>

    <ons-list-item>
        <ons-row>
            <ons-col width="40px">
                <ons-icon icon="fa-umbrella" class="lower"></ons-icon>
            </ons-col>
            <ons-col class="range-wrapper">
                <input type="range" value="30" class="range">
            </ons-col>
            <ons-col width="40px">
                <ons-icon icon="fa-umbrella"></ons-icon>
            </ons-col>
        </ons-row>
    </ons-list-item>
  </ons-list>

<ons-tabbar>
    <ons-tab page="xxx.html">
        <!--<ons-icon icon="ion-chevron-left" size="28px" class="tab-icon"></ons-icon>-->
    </ons-tab>
    <ons-tab page="xxx.html">
        <!--<ons-icon icon="ion-android-call" size="28px" class="tab-icon"></ons-icon>-->
    </ons-tab>
    <ons-tab page="xxx.html">
        <!--<ons-icon icon="ion-location" size="28px" class="tab-icon"></ons-icon>-->
    </ons-tab>
    <ons-tab page="xxx.html">
        <ons-icon icon="ion-compose" size="28px" class="tab-icon"></ons-icon>
    </ons-tab>
</ons-tabbar>

问题在于我无法移动范围。经过多次测试后我发现，如果我删除标签栏，我可以做到。

这是一个错误吗？我怎么解决呢？

谢谢！

Answer 1

那个DOM结构是错误的。 Tabbar应该是页面的父级，而不是孩子或兄弟（SlidingMenu - ＆gt; Tabbar - ＆gt; Pages）。你可以阅读它here in the docs。你只需要稍微改变一下：

<ons-sliding-menu page="tabbar.html" ... ><ons-sliding-menu>

<ons-template id="tabbar.html">
  <ons-tabbar>
    <ons-tab page="page1.html" active="true"></ons-tab>
    ...
  </ons-tabbar>
</ons-template>

我修复了您的Codepen here。如果您想在滑动菜单中更改页面时保留标签栏，则必须使用tabbar.setActiveTab代替menu.setMainPage。

另一种可能性是仅使用tabbar styles而不使用组件本身。在这种情况下，您可以保留当前结构，但要注意标签栏没有任何行为。它只是CSS所以你必须用JavaScript编写它的行为。

希望它有所帮助！

温泉范围和标签栏

1 个答案: