建议：先看一下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. C# 枚举类型 enum

    我个人感觉平日用到的enum应该是非常简单的,无非就是枚举和整数.字符串之间的转换.最近工作发现一些同事居然不太会用这个东东,于是就整理一下. 枚举类型是定义了一组“符号名称/值”配对.枚举类型是强类 ...

  2. 好用好玩的Python包

    ujson 用C++实现的json解析器,速度飞快. prettytable 在控制台下使用表格展示数据 import prettytable t=prettytable.PrettyTable([' ...

  3. 免费ss账号网站

    下面网址按排序顺序优先使用,数字越小优先级越高 1,https://io.freess.today/ 2,https://free-ss.site/ 3,https://ss.freess.org/ ...

  4. 关于java中死锁的总结

    关于死锁,估计很多程序员都碰到过,并且有时候这种情况出现之后的问题也不是非常好排查,下面整理的就是自己对死锁的认识,以及通过一个简单的例子来来接死锁的发生,自己是做python开发的,但是对于死锁的理 ...

  5. CNN(卷积神经网络)、RNN(循环神经网络)、DNN，LSTM

    http://cs231n.github.io/neural-networks-1 https://arxiv.org/pdf/1603.07285.pdf https://adeshpande3.g ...

  6. vue2.0 技巧汇总

    /** * Created by */ export default { trim: (str) => { //删除左右两端的空格 return str.replace(/(^\s*)|(\s* ...

  7. C#中准确跟踪错误异常所在的文件位置方法

    准确跟踪错误异常所在的文件位置方法是在发布改文件所在的DLL时候,把对应的pdb文件也一同发布. pdb文件是:PDB全称Program Database,不知道中文翻译叫什么.相信使用过VS的人对于 ...

  8. 类似于c语言读取文件进行解析

    $log_file_name = 'D:/static/develop/kuai_zhi/acagrid.com/public/Logs/'.date('Ym').'/'.date('d').'_er ...

  9. 织梦dedecms安全设置详情

    第一.安装的时候数据库的表前缀,最好改一下,不用dedecms默认的前缀dede_,可以改成ljs_,随便一个名称即可. 第二.后台登录开启验证码功能,将默认管理员admin删除,改成一个自己专用的, ...

  10. 从一次线上故障思考Java问题定位思路

    问题出现:现网CPU飙高,Full GC告警 CGI 服务发布到现网后,现网机器出现了Full GC告警,同时CPU飙高99%.在优先恢复现网服务正常后,开始着手定位Full GC的问题.在现场只能够 ...