ion-menu 根据屏幕的宽度进行显示或者隐藏

2018-04-08  本文已影响0人  小杰的简书

做项目做到了电视版本,需要实现由侧边栏的效果。需求为 窄屏不出现侧边栏  宽屏出现侧边栏。

解决如下:

在app.html中添加一个标签 ion-split-pane,注意 ion-nav标签里有一个main,如果没有它,会导致页面无法占满屏幕、

    <ion-split-pane when="(min-width:475px)"   [when]="isEnableSplitSpane()">

            <ion-menu [content]="content" >

            </ion-menu >

            <ion-nav [root]="rootPage" main #content  swipeBackEnabled="false"> </ion-nav>

    </ion-split-pane>

isEnableSplitSpane() 这个方法如果返回true就会显示,如果返回false 就会隐藏

很简单吧 试试效果吧

上一篇下一篇

猜你喜欢

热点阅读