建议:先看一下MUI注意事项

连接:http://ask.dcloud.net.cn/article/122


固定栏靠前

所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;

常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab)

元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;


顶部导航栏(.mui-bar-nav)

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
<a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color"></a>
<h1 class="mui-title">标题文字</h1>
</header>

效果如下:

MUI学习02-顶部导航栏的更多相关文章

  1. MUI学习01-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  2. uni-app 去除顶部导航栏

    自学uni-app第一天,因为有一点点的小程序和vue的基础所以感觉对uni-app有一点点的亲切感,从今天呢开始着手从登录页学习uni-app,记录一些用到的知识点,欢迎大家一起学习. 启动页隐藏顶 ...

  3. android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  4. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  5. 使用PagerSlidingTabStrip实现顶部导航栏

    使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下:          PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...

  6. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  7. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  8. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  9. Vant 顶部导航栏【van-tabs】Bug

    Vant 顶部导航栏[van-tabs]Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap" v-show=&q ...

随机推荐

  1. python导入import

    1.参考 Python 相对导入与绝对导入 2.Python import 的搜索路径 在当前目录下搜索该模块 在环境变量 PYTHONPATH 中指定的路径列表中依次搜索 在 Python 安装路径 ...

  2. [转]DBCP连接池的最简单应用(用于ORACLE数据库)

    http://blog.csdn.net/iihero/article/details/8254107 http://www.programgo.com/article/81693457907/ 鉴于 ...

  3. flink的集群的HA高可用

    对于一个企业级的应用,稳定性是首要要考虑的问题,然后才是性能,因此 HA 机制是必不可少的: 和 Hadoop 一代一样,从架构中我们可以很明显的发现 JobManager 有明显的单点问题(SPOF ...

  4. BZOJ1010 [HNOI2008]玩具装箱toy 动态规划 斜率优化

    原文链接http://www.cnblogs.com/zhouzhendong/p/8687797.html 题目传送门 - BZOJ1010 题意 一个数列$C$,然后把这个数列划分成若干段. 对于 ...

  5. Java03动手动脑

    1.当JAVA里定义的函数中去掉static后,怎么办? static代表静态,由于main函数是静态的,如果自己定义的函数方法加了static则在类加载时就一起加载了.但如果不写static,就必须 ...

  6. IDEA学习——模板及其常用模板

    模板及其常用模板 (1)psvm (2)sout sout / soutp / soutv / 变量.sout (3)fori iter增强for循环 itar普通for循环 (4)list.for ...

  7. Python交互图表可视化Bokeh:2. 辅助参数

    图表辅助参数设置 辅助标注.注释.矢量箭头 参考官方文档:https://bokeh.pydata.org/en/latest/docs/user_guide/annotations.html#col ...

  8. 018 easygui的使用

    一:安装 1.说明 看到小甲鱼的视频,也看了一些人家的安装,感觉不是太好. 还是想使用pip这种傻瓜的安装方式. 这个地方在实验了很多次,总算是可以了. 2.安装 3.测试 二:小测试 1.输入窗口 ...

  9. 错误 在类中找不到main方法请将main方法定义为 public static void main String args否则JavaFX应用程序类必须扩展javafx-ap

    最近在使用eclipse编写java程序时遇到这样一个问题: 错误在类中找不到main方法,请将main方法定义为 public static void main(String[] args)否则 J ...

  10. Codeforces 998D. Roman Digits 【打表找规律】

    <题目链接> 题目大意: 现在有无限个 1,5,10,50这四个数字,从中恰好挑选n个数字,问你这些数字的和总共有多少种不同的情况. 解题分析: 由于此题 n 的范围特别大,达到了1e9, ...