mui 选项卡与header文字同步

mui底部tab固定头部nav可变

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>Hello MUI</title>

	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

	<meta name="apple-mobile-web-app-capable" content="yes">

	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="../../css/mui.min.css">

	<style>

		html,

		body {

			background-color: #efeff4;

		}

		/*解决: Unable to preventDefault inside passive event listener due to target being treated as passive. */

		* { touch-action: none; }

	</style>

</head>

<body>

	<header class="mui-bar mui-bar-nav">

		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

		<h1 id="title" class="mui-title">首页</h1>

	</header>

	<nav class="mui-bar mui-bar-tab">

		<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">

			<span class="mui-icon mui-icon-home"></span>

			<span class="mui-tab-label">首页</span>

		</a>

		<a class="mui-tab-item" href="tab-webview-subpage-chat.html">

			<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>

			<span class="mui-tab-label">消息</span>

		</a>

		<a class="mui-tab-item" href="tab-webview-subpage-contact.html">

			<span class="mui-icon mui-icon-contact"></span>

			<span class="mui-tab-label">通讯录</span>

		</a>

		<a class="mui-tab-item" href="tab-webview-subpage-setting.html">

			<span class="mui-icon mui-icon-gear"></span>

			<span class="mui-tab-label">设置</span>

		</a>

	</nav>

	<script src="../../js/mui.min.js"></script>

	<script type="text/javascript" charset="utf-8">

		 //mui初始化

		mui.init();

		var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];

		var subpage_style = {

			top: '45px',

			bottom: '51px'

		};

		var aniShow = {};

		 //创建子页面，首个选项卡页面显示，其它均隐藏；

		mui.plusReady(function() {

			var self = plus.webview.currentWebview();

			for (var i = 0; i < 4; i++) {

				var temp = {};

				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);

				if (i > 0) {

					sub.hide();

				}else{

					temp[subpages[i]] = "true";

					mui.extend(aniShow,temp);

				}

				self.append(sub);

			}

		});

		 //当前激活选项

		var activeTab = subpages[0];

		var title = document.getElementById("title");

		 //选项卡点击事件

		mui('.mui-bar-tab').on('tap', 'a', function(e) {

			var targetTab = this.getAttribute('href');

			if (targetTab == activeTab) {

				return;

			}

			//更换标题

			title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

                    try{

			//显示目标选项卡

			//若为iOS平台或非首次显示，则直接显示

			if(mui.os.ios||aniShow[targetTab]){

				plus.webview.show(targetTab);

			}else{

				//否则，使用fade-in动画，且保存变量

				var temp = {};

				temp[targetTab] = "true";

				mui.extend(aniShow,temp);

				plus.webview.show(targetTab,"fade-in",300);

			}

			//隐藏当前;

			plus.webview.hide(activeTab);

                   }catch(e){}

			//更改当前活跃的选项卡

			activeTab = targetTab;

		});

		 //自定义事件，模拟点击“首页选项卡”

		document.addEventListener('gohome', function() {

			var defaultTab = document.getElementById("defaultTab");

			//模拟首页点击

			mui.trigger(defaultTab, 'tap');

			//切换选项卡高亮

			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");

			if (defaultTab !== current) {

				current.classList.remove('mui-active');

				defaultTab.classList.add('mui-active');

			}

		});

	</script>

</body>

</html>

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

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

<!doctype html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link href="../../css/mui.min.css" rel="stylesheet" />

		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">

		<style>

			[v-cloak] {

				display: none !important;

			}

			/*解决: Unable to preventDefault inside passive event listener due to target being treated as passive. */

			* {

				touch-action: none;

			}

		</style>

	</head>

	<body>

		<div id="index" v-cloak>

			<header class="mui-bar mui-bar-nav">

				<span class="mui-icon mui-pull-right iconfont icon-kefu"></span>

				<h1 class="mui-title" id="title">{{title}}</h1>

			</header>

			<nav class="mui-bar mui-bar-tab">

				<a id="defaultTab" class="mui-tab-item mui-active" href="home.html">

					<span class="mui-icon iconfont icon-shouye"></span>

					<span class="mui-tab-label">首页</span>

				</a>

				<a class="mui-tab-item" href="shop.html">

					<span class="mui-icon iconfont icon-shangcheng"></span>

					<span class="mui-tab-label">商城</span>

				</a>

				<a class="mui-tab-item" href="task.html">

					<span class="mui-icon iconfont icon-renwu"></span>

					<span class="mui-tab-label">任务</span>

				</a>

				<a class="mui-tab-item" href="message.html">

					<span class="mui-icon iconfont icon-xiaoxi"></span>

					<span class="mui-tab-label">消息</span>

				</a>

				<a class="mui-tab-item" href="mine.html">

					<span class="mui-icon iconfont icon-wo"></span>

					<span class="mui-tab-label">我</span>

				</a>

			</nav>

		</div>

		<script src="../../js/mui.js"></script>

		<script src="../../js/vue.js"></script>

		<script type="text/javascript">

			(function(mui, Vue) {

				var index = new Vue({

					el: '#index',

					data: {

						title: '首页'

					},

					mounted: function() {

						var _this = this;

						var subpages = ['home.html', 'shop.html', 'task.html', 'message.html', 'mine.html'];

						var subpage_style = {

							top: '45px',

							bottom: '51px'

						};

						var aniShow = {};

						//创建子页面，单个选项卡页面显示，其他均隐藏

						mui.plusReady(function() {

							//获取当前页面对象

							var self = plus.webview.currentWebview();

							for(var i = 0; i < subpages.length; i++) {

								var temp = {};

								//创建页面

								var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);

								if(i > 0) {

									sub.hide(); //隐藏页面

								} else {

									//加载完成后关闭首页加载动画

									temp[subpages[i]] = 'true';

									mui.extend(aniShow, temp);

								}

								self.append(sub); //将webview对象填充到窗口的方法

							}

						})

						//当前激活选项

						var activeTab = subpages[0];

						var title = document.getElementById('title');

						mui(".mui-bar-tab").on('tap', 'a', function(e) {

							var targetTab = this.getAttribute('href'); //获取页面href

							//更换标题

							_this.title = this.querySelector('.mui-tab-label').innerHTML;

							if(targetTab == activeTab) {

								return;

							}

							try {

								//显示目标选项卡

								//若为iOS平台或非首次显示，则直接显示

								if(mui.os.ios || aniShow[targetTab]) {

									plus.webview.show(targetTab);

								} else {

									//否则，使用fade-in动画，且保存变量

									var temp = {};

									temp[targetTab] = "true";

									mui.extend(aniShow, temp);

									plus.webview.show(targetTab, "fade-in", 300);

								}

								//						plus.webview.show(targetTab);//显示点击webview

								plus.webview.hide(activeTab); //隐藏当前webview;

							} catch(e) {

							}

							//更改当前活跃的选项卡

							activeTab = targetTab;

						})

						//自定义事件，模拟点击“首页选项卡”

						document.addEventListener('gohome', function(e) {

							console.log(e)

							var defaultTab = document.getElementById("defaultTab");

							//模拟首页点击

							mui.trigger(defaultTab, 'tap');

							//切换选项卡高亮

							var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");

							if(defaultTab !== current) {

								current.classList.remove('mui-active');

								defaultTab.classList.add('mui-active');

							}

						});

					}

				})

			})(mui, Vue)

		</script>

	</body>

</html>

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

MUI 选项卡切换+下拉刷新动态完整实现一例
前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
mui 百度语音识别转换文字
前言用mui混合开发的APP,现有一个功能需求就是语音转换成文字,并把语音进行保存.对此考虑两种选择讯飞和百度.最终选择了百度语音. 百度语音通过官方文档我们大致可以确定如果想要实现语音识别,要做 ...
mui 选项卡
方法一:通过css 实现选项卡 <div id="slider" class="mui-slider"> <div id="slid ...
Mui 选项卡 tab 高度没有自适应....
因为项目中用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的思路是用一个值保存当前的高度... 当点击其他 t ...
第5章使用MUI与H5+构建移动端app
H5+是JS封装的工具集合,通过H5+我们就可以使用JS的方式去调用到我们手机端上的一些原生的组件. http://dev.dcloud.net.cn/mui/ http://dev.dcloud.n ...
MUI开发记录
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器安卓模拟器有很多,我这里以夜神模 ...
MUI开发大全
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代 ...
mui学习
改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...
android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

随机推荐

CF986B Petr and Permutations
题意翻译 Petr要打乱排列.他首先有一个从 111 到 nnn 的顺序排列,然后进行 3n3n3n 次操作,每次选两个数并交换它们. Alex也要打乱排列.他与Petr唯一的不同是他进行 7n+17 ...
【题解】HNOI2004敲砖块
题目传送门:洛谷1437 决定要养成随手记录做过的题目的好习惯呀- 这道题目乍看起来和数字三角形有一点像,但是仔细分析就会发现,因为选定一个数所需要的条件和另一个数所需要的条件会有重复的部分,所以状态 ...
BZOJ4009 & 洛谷3242 & LOJ2113：[HNOI2015]接水果——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4009 https://www.luogu.org/problemnew/show/P3242 ht ...
Linux服务器上nginx安装的完整步骤
1.环境准备: 服务器系统版本:CentOS 6.5 nginx软件版本:nginx-1.13.9 2.资源准备: nginx下载地址:http://nginx.org/download/nginx- ...
HDU 3507 斜率优化dp
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
HDU2121：Ice_cream’s world II (虚根+有向图最小生成树)
Ice_cream’s world II Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
YARN和MapReduce的内存设置参考
如何确定Yarn中容器Container,Mapreduce相关参数的内存设置,对于初始集群,由于不知道集群的类型(如cpu密集.内存密集)我们需要根据经验提供给我们一个参考配置值,来作为基础的配置. ...
编译skia静态库时，图片解码库无法注册的问题
转载:http://www.cnblogs.com/imlucky/archive/2012/08/01/2617851.html 今天编译skia库,增加图片解码库时总是无效.按照此博客的方法修改后 ...
Shell脚本循环读取文件中的每一行
1.使用for循环 for line in `cat filename` do echo $line done 2.使用for循环 for line in $(cat filename) do ech ...
关于微信内置浏览器安卓端session丢失问题
项目上线测试,发现微信安卓端存在用户登录无法验证session情况, 导致每次接口请求都无法识别,而苹果客户端不会出现此问题,非微信环境打开不会出现此问题,找到一些解决方案做下记录: 方案1: 由于微 ...

mui 选项卡与header文字同步

mui底部tab固定 头部nav可变

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

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

随机推荐

热门专题

mui底部tab固定头部nav可变