建议:先看一下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. SpringBoot(十二):springboot2.0.2写测试用例

    导入maven依赖: <dependency> <groupId>junit</groupId> <artifactId>junit</artif ...

  2. Android 解压zip文件你知道多少?

    对于Android常用的压缩格式ZIP,你了解多少? Android的有两种解压ZIP的方法,你知道吗? ZipFile和ZipInputStream的解压效率,你对比过吗? 带着以上问题,现在就开始 ...

  3. 每天一个linux命令(8):rm

    1.命令简介 rm(Remove file 删除目录或文件)删除文件,对于链接文件,只是删除整个链接文件,而原有文件保持不变. 2.用法 rm [选项]... 文件.. 3.选项 -f, –force ...

  4. 转:关于S参数的一些理解

    关于S参数的一些理解 http://rf.eefocus.com/module/forum/thread-596241-1-1.html 台湾工程师图文独特讲解:S参数http://rf.eefocu ...

  5. ETF计划Q&A

    ETF计划Q&A 2018-07-16 参考:详解ETF计划.ETF计划Q&A(2017版) 目录 问1:ETF计划是什么?问2:ETF计划适合什么人参加?问3:我想参考你的计划,但告 ...

  6. org.apache.xerces.dom.ElementNSImpl.setUserData(Ljava/lang/String;Ljava/lang

    HTTP Status 500 - Handler processing failed; nested exception is java.lang.AbstractMethodError: org. ...

  7. 理解、学习与使用 JAVA 中的 OPTIONAL<转>

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) —— 每个 Java 程序员都 ...

  8. XCode10 运行app报错

    原因很简单:Xcode10起,苹果摒弃了对libstdc++库的支持转而支持libc++库了.为了保证老代码能跑,必须将几个库复制到对应文件夹(见后).同时修改Build Phases中的Link B ...

  9. spring boot+mybatis+mysql

    spring boot整合mybatis,曾经的几个小困惑和踩的坑. 一.mybatis的结构 mybatis和spring boot的整合,网上无数的教程,都是教你一步步集成,照着做没问题,但做下来 ...

  10. MATLAB 显示输出数据的三种方式

    MATLAB 显示输出数据的三种方式 ,转载 https://blog.csdn.net/qq_35318838/article/details/78780412 1.改变数据格式 当数据重复再命令行 ...