javascript - Onsen-UI 分离器侧始终关闭

标签 javascript cordova onsen-ui

我目前正在使用 OnsenUI 开发一个 phonegap 应用程序,我想使用 ons-splitter 创建一个没 Angular 滑动菜单。但是,我对分离器端有一个问题,因为它似乎是以一种始终在其中一种手机方向(横向或纵向)中打开的方式开发的。根据文档,如果未定义“collapse”参数,默认情况下它应该始终折叠,但它总是打开。我通过根据手机方向动态更改此参数在 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');
        }
    })

最佳答案

温泉论坛上的一些好人回答了我的问题。文档具有误导性。保留 collapse 参数未定义实际上是行不通的,您必须将其定义为空字符串:

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

希望这对某人有帮助。

关于javascript - Onsen-UI 分离器侧始终关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35312590/

相关文章:

javascript - 在表格行上动画 ng-show

javascript - 使用带有偏差的 Random()

javascript - Service Worker 不从缓存中返回文件

android - Phonegap 和 Android 滚动问题

javascript - 如何在 onsen-ui 中使用自动完成功能?

JavaScript 平滑滚动不起作用

javascript - 使用网络移动框架?

cordova - Safari Web 检查器为空白

javascript - 如何在onsen ui的pushpage方法中传递多个值

javascript - ng-repeat 不适用于 onsen ui