建议:先看一下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. centos6.9编译安装nginx

    1.安装nginx所需的依赖包: yum -y install gcc gcc-c++ autoconf automake  zlib zlib-devel openssl openssl-devel ...

  2. python全栈开发day77-博客主页

    1.文章分类 2.标签 3.归档 1) MySQL的日期格式化函数 DATE_FORMAT(字段名,格式) 2) Django ORM中如何执行SQL原生语句 (1) models.Article.o ...

  3. js拷贝

    现在有一个对象 var obj = { name: '隔壁老王', age: 60, sex: 'male' } 我们现在想把obj里的每一个属性拷贝到一个空对象var obj1 = {}中,那么需要 ...

  4. linq 将datatable分组求和在转datatable

    DataTable dt = new DataTable(); dt.Columns.Add("CustomerID"); dt.Columns.Add("aa" ...

  5. P1330 封锁阳光大学 DFS

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  6. Centos7服务器中安装MySQL(选择一个你想要的版本)

    开始,我默认安装了MySQL8,但是在测试的时候发现通过Hibernate连接之前的MySQL5.7的代码运行在连接新版本的库的时候发生异常,出于时间原因没有深度排查 但是我严重怀疑是版本匹配问题,为 ...

  7. Gym 100342J Triatrip (求三元环的数量) (bitset优化)

    <题目链接> 题目大意:用用邻接矩阵表示一个有向图,现在让你求其中三元环的数量. 解题分析:先预处理得到所有能够直接到达每个点的集合$arrive[N]$和所有能够由当前点到达的集合$to ...

  8. Shell学习之条件测试(四)

    Shell学习之条件测试 目录 逻辑测试 文件测试 数值比较 字符串比较 逻辑测试 格式: [ 表达式 ] 操作符 [ 表达式2 ] …… 命令1 操作符 命令2 …… 常用的操作符 ( 注意:-a和 ...

  9. Python常用模块--collections

    collections是Python中一个非常强大的容器数据模块. 1.创建升级版的元组--namedtupe Python的元组(1,2,3)具有不可变性,但是单独的元组在无法满足现有需求时,可以使 ...

  10. BeagleBone Black 从零到一 (2 MLO、U-Boot) 转

    文章原址:jexbat.com/categories/BeagleBone/ 什么是 U-Boot 熟悉嵌入式开发的应该都听过它,U-boot 就是启动系统前的一段引导程序,虽然是引导程序,但是功能非 ...