Onsen-UI分离器侧始终关闭

时间:2016-02-10 10:26:22

标签: javascript cordova onsen-ui

我目前正在使用OnsenUI开发一个phonegap应用程序,我想使用ons-splitter创建一个没有角度的滑动菜单。但是,我遇到了分离器方面的问题,因为它似乎是以一种始终以手机方向(横向或纵向)打开的方式开发的。根据文件,如果"崩溃" param未定义它默认情况下应始终折叠,但它总是打开。我通过动态更改此参数在javascript中部署了一种解决方法,具体取决于手机方向,但它有点滞后,并且不够令人满意。

问题是:是否可以强制分割器侧仅在滑动时打开?或者是否有更好的解决方案使其有效?

HTML代码:

<ons-splitter var="splitter">
    <ons-splitter-side id="side_splitter" side="left" swipeable width="200px">
        <ons-page>
            <ons-toolbar>
                <div class="center">Menu</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item modifier="chevron">
                    Page 1
                </ons-list-item>
                <ons-list-item modifier="chevron">
                    Page 2
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="page1.html">
    </ons-splitter-content>
</ons-splitter>

Javascript解决方法:

ons.orientation.on('change', function(e){
        if (e.isPortrait){
            console.log('portrait');
            $("#side_splitter").attr('collapse','portrait');
        } else {
            console.log('landscape');
            $("#side_splitter").attr('collapse','landscape');
        }
    })

1 个答案:

答案 0 :(得分:3)

onsen论坛上的一些好人回答了我的问题。文档具有误导性。离开崩溃参数未定义实际上不起作用,您必须将其定义为空字符串:

<ons-splitter-side id="side_splitter" side="left" collapse="" swipeable width="200px">

希望这有助于某人。