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, ...

随机推荐

zoj 1298 Domino Effect (最短路径)
Domino Effect Time Limit: 2 Seconds Memory Limit: 65536 KB Did you know that you can use domino ...
git使用笔记（十一）rebase
By francis_hao Oct 22,2017 git-rebase,改变commit的基础参照概要 git rebase [-i | --interactive] [options ...
JS传递中文参数出现乱码的解决办法
一.window.open() 乱码: JS中使用window.open("url?param="+paramvalue)传递参数出现乱码,提交的时候,客户端浏览器URL中显示参数 ...
switch语法的盲点
switch语法在项目使用的频率很低,今天看到一个相关的例子引发一些思考,,同时自己也写了一些简单的例子如下: 实例1: int dayOfWeek = 5; switch (dayOfWeek){ ...
[10.18模拟赛] 序列 (DP)
[10.18模拟赛] 序列题目描述山山有一个整数序列s1,s2,-,sn,其中1≤si≤k. 求出有多少个准确移除m个元素后不同的序列.答案模(1e9+7) 输入输入包括几个测试用例,并且由文件 ...
Codeforces Round #547 (Div. 3) 题解
Codeforces Round #547 (Div. 3) 题目链接:https://codeforces.com/contest/1141 A,B咕咕了... C. Polycarp Restor ...
Cows POJ - 2481 树状数组
Farmer John's cows have discovered that the clover growing along the ridge of the hill (which we can ...
HDU1114 背包
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
Bigbluebutton中文乱码问题
Bigbluebutton中文乱码问题 Libreoffice安装中文桌面版:在新立得软件包管理器中搜索下面两个文件,之后安装: libreoffice-l10n-zh-cn 和 libreoffi ...
你还在用notifyDataSetChanged？
想到发这篇帖子是源于我的上一篇帖子#Testin杯#多线程断点续传后台下载 .帖子中讲述的项目使用了listView这个控件,而且自定义了adapter.在更新item的进度条时发现每次使用notif ...

mui 选项卡与header文字同步

mui底部tab固定 头部nav可变

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

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

随机推荐

热门专题

mui底部tab固定头部nav可变