温泉范围和标签栏答案

【问题标题】：Onsen- Range and Tabbar温泉范围和标签栏
【发布时间】：2016-01-22 13:16:59
【问题描述】：

这是我的密码笔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>

问题是我无法移动范围。经过无数次的测试，我发现，如果我删除标签栏，我就可以做到。

这是一个错误吗？我该如何解决？

谢谢！

【问题讨论】：

标签： onsen-ui

【解决方案1】：

那个 DOM 结构是错误的。 Tabbar 应该是页面的父级，而不是子级或兄弟级（SlidingMenu -> Tabbar -> 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 编写它的行为。

希望对你有帮助！

【讨论】：