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

随机推荐

HTML、 CSS、 JavaScript三者的关系 1
HTML. CSS. JavaScript三者的关系网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior) HTML —— ...
[SP8372-TSUM]Triple Sums
题面在这里 description 某\(B\)姓\(OJ\)权限题给出\(n\)个正整数\(a[i]\),求\(i<j<k\)且\(S=a[i]+a[j]+a[k]\)的三元组\((i ...
BZOJ5312：冒险——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5312 Kaiser终于成为冒险协会的一员,这次冒险协会派他去冒险,他来到一处古墓,却被大门上的守护 ...
BZOJ5335：[TJOI2018]智力竞赛——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5335 小豆报名参加智力竞赛,他带上了n个好朋友作为亲友团一块来参加比赛. 比赛规则如下: 一共有m ...
51nod 1274 最长递增路径（DP）
一开始自己想了一种跑的巨慢..写了题解的做法又跑的巨快..一脸懵逼显然要求边权递增就不可能经过重复的边了,那么设f[i]为第i条边出发能走多远就好了,这是我一开始的写法,可能dfs冗余状态较多,跑的 ...
JAVA对象的深度克隆
有时候,我们需要把对象A的所有值复制给对象B(B = A),但是这样用等号给赋值你会发现,当B中的某个对象值改变时,同时也会修改到A中相应对象的值! 也许你会说,用clone()不就行了?!你的想法只 ...
js ejs for语句的第二种遍历用法
var A = {a:1,b:2,c:3,d:"hello world"}; for(var k in A) { console.log(k,A[k]); var h = new ...
java nio buffer读取数据乱码问题
public static void main(String[] args) throws IOException { String charsetName = "GBK"; St ...
jsp04状态管理
1.http 协议的无状态性无状态是指,当浏览器发送请求给服务器的时候,服务器会响应.但当同一个浏览器再次发送请求时,服务器不会知道是刚才那个浏览器. 简单说,服务器[不会保存用户状态],不会记得客 ...
ClassCastException: org.apache.tomcat.websocket.server.WsServerContainer cannot be cast to javax.websocket.server.ServerContainer
21:09:22.221 [MessageBroker-3] INFO c.t.s.s.impl.StockNewsServiceImpl - [2017-12-16 21:09:22] execut ...

mui 选项卡与header文字同步

mui底部tab固定 头部nav可变

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

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

随机推荐

热门专题

mui底部tab固定头部nav可变