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

随机推荐

python3.5安装pycrypto
在python中使用AES加密是一种有效的加密方式,如果你研究过微信公众号api就会发现,它也用的是这个加密的.在写代码的时候,要安装crypto模块,在linux或者mac上都好说,但是在windo ...
Codeforces Round #539 (Div. 2) 题解
Codeforces Round #539 (Div. 2) 题目链接:https://codeforces.com/contest/1113 A. Sasha and His Trip 题意: n个 ...
caffe环境的搭建（Ubuntu14.04 64bit，无CUDA，caffe在CPU下运行）
1. 安装BLAS : $ sudo apt-get install libatlas-base-dev 2. 安装依赖项: $ sudo apt-get install libprotobuf-de ...
会话技术: Cookie 和 Session
会话技术会话技术:从浏览器开始访问服务器,到关闭浏览器,这期间发生了许多次请求和响应,这个过程就叫做一次会话. Cookie 和 Session 都是处理会话技术的两种具体实现,Cookie将数据保 ...
Windows常用shell命令大全（转）
[Windows常用shell命令大全] 基于鼠标操作的后果就是OS界面外观发生改变, 就得多花学习成本.更主要的是基于界面引导Path与命令行直达速度是难以比拟的.另外Geek很大一部分是键盘控,而 ...
annot refer to a non-final variable * inside an inner class defined in a different method"错误解析
在使用Java局部内部类或者匿名内部类时,若该类调用了所在方法的局部变量,则该局部变量必须使用final关键字来修饰,否则将会出现编译错误“Cannot refer to a non-final va ...
「模板」AC自动机（ACAM）
#include <algorithm> #include <cstdio> #include <cstring> #include <queue> u ...
【BZOJ2288】生日礼物 [贪心]
生日礼物 Time Limit: 10 Sec Memory Limit: 128 MB[Submit][Status][Discuss] Description ftiasch 18岁生日的时候, ...
【vijos】P1448 校门外的树
[题意]两种操作,[L,R]种新的树(不覆盖原来的),或查询[L,R]树的种类数.n<=50000. [算法]树状数组||线段树 [题解]这题可以用主席树实现……不过因为不覆盖原来的,所以有更简 ...
【51NOD-0】1118 机器人走方格
[算法]DP #include<cstdio> #include<algorithm> using namespace std; ,maxn=; int f[maxn][max ...

mui 选项卡与header文字同步

mui底部tab固定 头部nav可变

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

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

随机推荐

热门专题

mui底部tab固定头部nav可变