Onsen-UI 分离器侧始终关闭
Onsen-UI splitter-side always closed
我目前正在使用 OnsenUI 开发一个 phonegap 应用程序,我想使用 ons-splitter 创建一个没有 angular 的滑动菜单。但是,我对分离器端有一个问题,因为它似乎是以一种总是在 phone 方向(横向或纵向)之一打开的方式开发的。根据文档,如果 "collapse" 参数未定义,默认情况下它应该始终折叠,但它总是打开。我通过根据 phone 方向动态更改此参数在 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">
希望这对某人有所帮助。
我目前正在使用 OnsenUI 开发一个 phonegap 应用程序,我想使用 ons-splitter 创建一个没有 angular 的滑动菜单。但是,我对分离器端有一个问题,因为它似乎是以一种总是在 phone 方向(横向或纵向)之一打开的方式开发的。根据文档,如果 "collapse" 参数未定义,默认情况下它应该始终折叠,但它总是打开。我通过根据 phone 方向动态更改此参数在 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">
希望这对某人有所帮助。