建议:先看一下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学习01-顶部导航栏的更多相关文章

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

    建议:先看一下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. Mybatis中使用集合、数组

    一.简述 本文讲Mybatis中如何将传入参数为数组或者集合对象,进行遍历,组合Where条件中如in条件等内容. 有3种情况: 如果传入的是单参数且参数类型是一个List的时候,collection ...

  2. 【开源】C#信息抽取系统【招募C#队友】

    FDDC2018金融算法挑战赛02-A股上市公司公告信息抽取 更新时间 2018年7月11日 By 带着兔子去旅行 信息抽取是NLP里的一个实用内容.该工具的目标是打造一个泛用的自动信息抽取工具.使得 ...

  3. 每天一个linux命令(17):whereis

    1.命令简介         whereis (whereis) 命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径.         whereis命令只能用于程序名的搜索,而且 ...

  4. 【Linux】磁盘读写 测试

    一.如何查看当前磁盘的IO使用情况 使用命令:iotop Total DISK READ: 3.89 K/s | Total DISK WRITE: 0.00 B/s TID PRIO USER DI ...

  5. 如何加大tomcat可以使用的内存

    tomcat默认可以使用的内存为128MB,在较大型的应用项目中,这点内存是不够的,需要调大. linux下,在文件{tomcat_home}/bin/catalina.sh的前面, 增加如下设置:J ...

  6. Redis】Java中使用Jedis操作Redis(Maven导入包)、创建Redis连接池

    如果我们使用Java操作Redis, 需要确保已经安装了 redis 服务及 Java redis 驱动. Maven项目可以直接在pom.xml中加入jedis包驱动: <!-- https: ...

  7. 【C++】C++中的数组

    目录结构: contents structure [-] 一维数组 数组的定义和初始化 数组元素的访问 数组和指针 多维数组 数组是存放相同类型的容器,数组的大小确定不变,不能随意向数组中添加元素.因 ...

  8. 【C#】C#线程_基元线程的同步构造

    目录结构: contents structure [+] 简介 为什么需要使用线程同步 线程同步的缺点 基元线程同步 什么是基元线程 基元用户模式构造和内核模式构造的比较 用户模式构造 易变构造(Vo ...

  9. django 查询如何使用 or

    参考:http://stackoverflow.com/questions/6567831/how-to-perform-or-condition-in-django-queryset django自 ...

  10. CentOS 服务器添加简易"回收站"

    删除是危险系数很高的操作,一旦误删可能会造成难以估计的损失.比如,一条简单的语句:rm –rf /* 就会把整个系统全部删除,而 Linux 并不会因为这条语句的不合理而拒绝执行. 在 Windows ...