建议:先看一下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. npm报错没有权限

    在npm install经常会报错没有权限 这个时候需要清除一下缓存 npm cache clean --force

  2. bzoj2908

    题解: 我的做法好像跟网上不太一样.. 首先分位讨论 我的做法是先观察出了一个性质 这个答案只跟最后一个0出现的位置有关(这个随便yy一下很容易出来因为运算有0则1) 然后问题就变成了 给出一棵树,支 ...

  3. 使用sparkSQL的insert操作Kudu

    可以选择使用Spark SQL直接使用INSERT语句写入Kudu表:与'append'类似,INSERT语句实际上将默认使用UPSERT语义处理: import org.apache.kudu.sp ...

  4. Codeforces 1144G Two Merged Sequences dp

    Two Merged Sequences 感觉是个垃圾题啊, 为什么过的人这么少.. dp[ i ][ 0 ]表示处理完前 i 个, 第 i 个是递增序列序列里的元素,递减序列的最大值. dp[ i ...

  5. excel怎么样批量将unix时间戳转化为北京时间

    https://jingyan.baidu.com/article/63acb44afb1e2561fcc17e3f.html 1.单元格属性改变日期 2.使用公式: =(A2+8*3600)/864 ...

  6. JavaSE| 面向对象-类的五大成员

    面向对象 面向对象只是其中一种编程思想,还有很多其他的编程思想:面向过程.面向切面.面向服务编程... 面向过程的思维方式:注重步骤.过程,面向过程强调的是功能行为: 面向对象的思维方式:关注的是“对 ...

  7. 063 SparkStream数据接收方式

    1.两种方式 2.Basic Source 由StreamingContext可以提供的API 上面做的wordcount中的方式就算是第一种方式. 3.Advanced Source 使用数据接收器 ...

  8. LeetCode 20. 有效的括号( 括号配对 )

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...

  9. 树莓派3 B+ 的串口(USART)使用问题

    转载:http://ukonline2000.com/?p=880 最新64位树莓派3已经发布快两周了,玩家们陆陆续续也开始使用上树莓派3了,随着玩家的增多,虽然拥有强大硬件配置的树莓派3也出现了各种 ...

  10. There is no setter for property named 可能产生的原因!

     There is no setter for property named 'operateIP ' in 'class com.chinaunicom.wsp.facade.entity.User ...