mui底部tab固定 头部nav可变

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="../../css/mui.min.css">
  10. <style>
  11. html,
  12. body {
  13. background-color: #efeff4;
  14. }
  15. /*解决: Unable to preventDefault inside passive event listener due to target being treated as passive. */
  16. * { touch-action: none; }
  17. </style>
  18. </head>
  19. <body>
  20. <header class="mui-bar mui-bar-nav">
  21. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  22. <h1 id="title" class="mui-title">首页</h1>
  23. </header>
  24. <nav class="mui-bar mui-bar-tab">
  25. <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
  26. <span class="mui-icon mui-icon-home"></span>
  27. <span class="mui-tab-label">首页</span>
  28. </a>
  29. <a class="mui-tab-item" href="tab-webview-subpage-chat.html">
  30. <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
  31. <span class="mui-tab-label">消息</span>
  32. </a>
  33. <a class="mui-tab-item" href="tab-webview-subpage-contact.html">
  34. <span class="mui-icon mui-icon-contact"></span>
  35. <span class="mui-tab-label">通讯录</span>
  36. </a>
  37. <a class="mui-tab-item" href="tab-webview-subpage-setting.html">
  38. <span class="mui-icon mui-icon-gear"></span>
  39. <span class="mui-tab-label">设置</span>
  40. </a>
  41. </nav>
  42. <script src="../../js/mui.min.js"></script>
  43. <script type="text/javascript" charset="utf-8">
  44. //mui初始化
  45. mui.init();
  46. var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
  47. var subpage_style = {
  48. top: '45px',
  49. bottom: '51px'
  50. };
  51. var aniShow = {};
  52. //创建子页面,首个选项卡页面显示,其它均隐藏;
  53. mui.plusReady(function() {
  54. var self = plus.webview.currentWebview();
  55. for (var i = 0; i < 4; i++) {
  56. var temp = {};
  57. var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
  58. if (i > 0) {
  59. sub.hide();
  60. }else{
  61. temp[subpages[i]] = "true";
  62. mui.extend(aniShow,temp);
  63. }
  64. self.append(sub);
  65. }
  66. });
  67. //当前激活选项
  68. var activeTab = subpages[0];
  69. var title = document.getElementById("title");
  70. //选项卡点击事件
  71. mui('.mui-bar-tab').on('tap', 'a', function(e) {
  72. var targetTab = this.getAttribute('href');
  73. if (targetTab == activeTab) {
  74. return;
  75. }
  76. //更换标题
  77. title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
  78. try{
  79. //显示目标选项卡
  80. //若为iOS平台或非首次显示,则直接显示
  81. if(mui.os.ios||aniShow[targetTab]){
  82. plus.webview.show(targetTab);
  83. }else{
  84. //否则,使用fade-in动画,且保存变量
  85. var temp = {};
  86. temp[targetTab] = "true";
  87. mui.extend(aniShow,temp);
  88. plus.webview.show(targetTab,"fade-in",300);
  89. }
  90. //隐藏当前;
  91. plus.webview.hide(activeTab);
  92. }catch(e){}
  93. //更改当前活跃的选项卡
  94. activeTab = targetTab;
  95. });
  96. //自定义事件,模拟点击“首页选项卡”
  97. document.addEventListener('gohome', function() {
  98. var defaultTab = document.getElementById("defaultTab");
  99. //模拟首页点击
  100. mui.trigger(defaultTab, 'tap');
  101. //切换选项卡高亮
  102. var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
  103. if (defaultTab !== current) {
  104. current.classList.remove('mui-active');
  105. defaultTab.classList.add('mui-active');
  106. }
  107. });
  108. </script>
  109. </body>
  110. </html>

原文 https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tab-webview-main.html

mui中用vue实现[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../../css/mui.min.css" rel="stylesheet" />
  8. <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
  9. <style>
  10. [v-cloak] {
  11. display: none !important;
  12. }
  13. /*解决: Unable to preventDefault inside passive event listener due to target being treated as passive. */
  14. * {
  15. touch-action: none;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div id="index" v-cloak>
  21. <header class="mui-bar mui-bar-nav">
  22. <span class="mui-icon mui-pull-right iconfont icon-kefu"></span>
  23. <h1 class="mui-title" id="title">{{title}}</h1>
  24. </header>
  25. <nav class="mui-bar mui-bar-tab">
  26. <a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
  27. <span class="mui-icon iconfont icon-shouye"></span>
  28. <span class="mui-tab-label">首页</span>
  29. </a>
  30. <a class="mui-tab-item" href="shop.html">
  31. <span class="mui-icon iconfont icon-shangcheng"></span>
  32. <span class="mui-tab-label">商城</span>
  33. </a>
  34. <a class="mui-tab-item" href="task.html">
  35. <span class="mui-icon iconfont icon-renwu"></span>
  36. <span class="mui-tab-label">任务</span>
  37. </a>
  38. <a class="mui-tab-item" href="message.html">
  39. <span class="mui-icon iconfont icon-xiaoxi"></span>
  40. <span class="mui-tab-label">消息</span>
  41. </a>
  42. <a class="mui-tab-item" href="mine.html">
  43. <span class="mui-icon iconfont icon-wo"></span>
  44. <span class="mui-tab-label"></span>
  45. </a>
  46. </nav>
  47. </div>
  48. <script src="../../js/mui.js"></script>
  49. <script src="../../js/vue.js"></script>
  50. <script type="text/javascript">
  51. (function(mui, Vue) {
  52. var index = new Vue({
  53. el: '#index',
  54. data: {
  55. title: '首页'
  56. },
  57. mounted: function() {
  58. var _this = this;
  59. var subpages = ['home.html', 'shop.html', 'task.html', 'message.html', 'mine.html'];
  60. var subpage_style = {
  61. top: '45px',
  62. bottom: '51px'
  63. };
  64. var aniShow = {};
  65. //创建子页面,单个选项卡页面显示,其他均隐藏
  66. mui.plusReady(function() {
  67. //获取当前页面对象
  68. var self = plus.webview.currentWebview();
  69. for(var i = 0; i < subpages.length; i++) {
  70. var temp = {};
  71. //创建页面
  72. var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
  73. if(i > 0) {
  74. sub.hide(); //隐藏页面
  75. } else {
  76. //加载完成后关闭首页加载动画
  77. temp[subpages[i]] = 'true';
  78. mui.extend(aniShow, temp);
  79. }
  80. self.append(sub); //将webview对象填充到窗口的方法
  81. }
  82. })
  83. //当前激活选项
  84. var activeTab = subpages[0];
  85. var title = document.getElementById('title');
  86. mui(".mui-bar-tab").on('tap', 'a', function(e) {
  87. var targetTab = this.getAttribute('href'); //获取页面href
  88. //更换标题
  89. _this.title = this.querySelector('.mui-tab-label').innerHTML;
  90. if(targetTab == activeTab) {
  91. return;
  92. }
  93. try {
  94. //显示目标选项卡
  95. //若为iOS平台或非首次显示,则直接显示
  96. if(mui.os.ios || aniShow[targetTab]) {
  97. plus.webview.show(targetTab);
  98. } else {
  99. //否则,使用fade-in动画,且保存变量
  100. var temp = {};
  101. temp[targetTab] = "true";
  102. mui.extend(aniShow, temp);
  103. plus.webview.show(targetTab, "fade-in", 300);
  104. }
  105. // plus.webview.show(targetTab);//显示点击webview
  106. plus.webview.hide(activeTab); //隐藏当前webview;
  107. } catch(e) {
  108. }
  109. //更改当前活跃的选项卡
  110. activeTab = targetTab;
  111. })
  112. //自定义事件,模拟点击“首页选项卡”
  113. document.addEventListener('gohome', function(e) {
  114. console.log(e)
  115. var defaultTab = document.getElementById("defaultTab");
  116. //模拟首页点击
  117. mui.trigger(defaultTab, 'tap');
  118. //切换选项卡高亮
  119. var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
  120. if(defaultTab !== current) {
  121. current.classList.remove('mui-active');
  122. defaultTab.classList.add('mui-active');
  123. }
  124. });
  125. }
  126. })
  127. })(mui, Vue)
  128. </script>
  129. </body>
  130. </html>

mui 选项卡与header文字同步的更多相关文章

  1. MUI 选项卡切换+下拉刷新动态 完整实现一例

    前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. mui 百度语音识别转换文字

    前言 用mui混合开发的APP,现有一个功能需求就是语音转换成文字,并把语音进行保存.对此考虑两种选择讯飞和百度.最终选择了百度语音. 百度语音 通过官方文档我们大致可以确定如果想要实现语音识别,要做 ...

  3. mui 选项卡

    方法一:通过css 实现选项卡 <div id="slider" class="mui-slider"> <div id="slid ...

  4. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

  5. 第5章 使用MUI与H5+构建移动端app

    H5+是JS封装的工具集合,通过H5+我们就可以使用JS的方式去调用到我们手机端上的一些原生的组件. http://dev.dcloud.net.cn/mui/ http://dev.dcloud.n ...

  6. MUI开发记录

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...

  7. MUI开发大全

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代 ...

  8. mui学习

      改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...

  9. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

随机推荐

  1. 具体数学二项式至生成函数章-----致敬Kunth

    关于标题取得这么奇怪.因为在具体数学中.这两章是分开叙述的.并且分别叙述得淋漓尽致! 我只参悟其中关于生成函数的一小部分内容(暂时于我够用了.) 提二项式系数之前不得不提组合数.以往在高中用的是符号C ...

  2. [HNOI2009]有趣的数列 卡特兰数

    题面:[HNOI2009]有趣的数列 题解: 观察到题目其实就是要求从长为2n的序列中选n个放在集合a,剩下的放在集合b,使得集合a和集合b中可以一一对应的使a中的元素小于b. 2种想法(实质上是一样 ...

  3. [HNOI2010]合唱队 区间DP

    ---题面--- 题解: 偶然翻到这道题,,,就写了. 观察到一个数被插在哪里只受前一个数的影响,如果明确了前一个数是哪个,那么我们就可以确定大小关系,就可以知道当前这个数插在哪里,而上一个插入的数就 ...

  4. 【luogu2181】对角线

    首先由于不会有三条对角线交于一点,所以过某一个交点有且只能有2条对角线 而这两条对角线实质上是确定了4个顶点(也可以看做是一个四边形的两条对角线交于一点,求四边形的数量). 因此我们只需要确定4个顶点 ...

  5. SPOJ8222/NSUBSTR:Substrings——题解

    https://www.luogu.org/problemnew/show/SP8222#sub http://www.spoj.com/problems/NSUBSTR/ 翻译来自洛谷. 你得到一个 ...

  6. IDEA中使用Docker: 图形化 or 命令行 ,你更稀罕那个??

    Docker简介: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 容器是完全使用沙箱机 ...

  7. HDU 4771 (DFS+BFS)

    Problem Description Harry Potter has some precious. For example, his invisible robe, his wand and hi ...

  8. Uva-oj Palindromes 暴力

     Palindromes Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Statu ...

  9. stout代码分析之十一:hashmap和multihashmap

    hashmap是std::unordered_map的子类,前者对后者的接口做了进一步封装. hashmap的移动构造函数: hashmap(std::map<Key, Value>&am ...

  10. eclipse ----- indexer

    使能indexer,可以实现变量.函数等的跳转, 即跳转到定义的位置