[Ionic]如何实现一个全局的浮动菜单栏？

需求是实现一个app全局的浮动菜单栏，页面的切换不会影响该菜单栏的显示，也不会刷新。
在刚开始的时候想以component的方式嵌入到每个page的html里，后来发现页面在跳转的时候，这个菜单栏总是在刷新，效果不太理想。
后来的一个解决方法是，把这个component直接放到了app.component.html里，比如：

<ion-app>
<ion-router-outlet></ion-router-outlet>
<app-sidemenu></app-sidemenu>
</ion-app>

其中app-sidemenu就是自定义的一个菜单栏, 其具体的样式如下：

.sidemenu {width: 100px;height: 100%;position: absolute;left: 0;background: #fcfcfc;
}

可以看到是固定了宽度，position的方式是absolute, 总是靠在页面的左边。

[Ionic]如何实现一个全局的浮动菜单栏？相关推荐

[html] 对一个元素设置浮动后，它的特征是什么？
[html] 对一个元素设置浮动后,它的特征是什么? 浮动元素脱离正常的文档流浮动元素后的内联元素,将围绕在浮动元素周围浮动元素会造成父元素的高度坍塌个人简介我是歌谣,欢迎和大家一起交流前后端知识 ...
Tycho build 3: 创建一个全局构建项目
在第一个Tycho教程中,我们创建了一个pom文件来存储我们的构建指令.文件中的内容将在以后重复介绍.因此我们将重构第一个项目,扩展通用设置到一个全局pom文件中. 实际上Tycho已经为我们做了一些 ...
如何产生一个全局唯一的流水号（附demo）
本文介绍如何使用最简单的方法产生一个全局唯一的流水号,支持集群,性能可靠,并且经过实际的应用唯一流水号的格式为当前系统时间+当前服务器编号+并发序列号,长度最短可为17位,每毫秒支持生成多个并且支持 ...
封装一个全局使用的二次确认弹窗
背景: 如图所示,在项目中进行删除.取消.停用等等操作的时候,出于考虑误操作等,我们通常会需要用户进行二次确认,然后再进行操作.对于这种使用比较多的公共功能,我们如何才能保持一致并且简单的使用呢?出于 ...
华为快应用-怎样写一个全局的变量和方法
看过博主其他博客的都知道博主是做iOS出身,后来学的前端,Java,weex,快应用这些,思想上总是偏向于iOS,所以在快应用中也总想着能写一个全局的方法,现在就把这个经验分享出来: 在快应用的工程中 ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...
关于Android封装一个全局的BaseActivity你需要知道的
关于Android封装一个全局的BaseActivity你需要知道的 1.前言 2.特点 3.代码及说明 3.1.优缺点 3.2.代码 3.3.注意点 4.总结 5.最后 1.前言对于一个Andro ...
php正则表达式全局查找,执行一个全局正则表达式匹配 - PHP 7 中文文档
(PHP 4, PHP 5, PHP 7) preg_match_all – 执行一个全局正则表达式匹配说明 preg_match_all ( string $pattern , string $s ...
手把手教你用CSS实现一个VR 3D游戏菜单栏效果
3D游戏菜单组件关于如何建立一个响应性.适应性和无障碍的3D游戏菜单的基础性概述. 在这篇文章中,我想带着大家写一个3D游戏菜单组件的案例.首先让我们看看成品是什么样子的概述相信大家都玩过赛博朋 ...

[Ionic]如何实现一个全局的浮动菜单栏？

[Ionic]如何实现一个全局的浮动菜单栏？相关推荐

最新文章

热门文章