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

随机推荐

BZOJ5190 Usaco2018 Jan Stamp Painting（动态规划）
可以大胆猜想的一点是,只要有不少于一个长度为k的颜色相同子串,方案就是合法的. 直接算有点麻烦,考虑减去不合法的方案. 一个正(xue)常(sha)的思路是枚举序列被分成的段数,问题变为用一些1~k- ...
ADC关键性能指标及误区
ADC关键性能指标及误区由于ADC产品相对于网络产品和服务器需求小很多,用户和集成商在选择产品时对关键指标的理解难免有一些误区,加之部分主流厂商刻意引导,招标规范往往有不少非关键指标作被作为必须符合 ...
Springboot2.x+shiro+redis（Lettuce）整合填坑
主要记录关键和有坑的地方前提: 1.SpringBoot+shiro已经集成完毕,如果没有集成,先查阅之前的Springboot2.0 集成shiro权限管理 2.redis已经安装完成 3.red ...
三个月死磕Python是种什么样的体验？
3个月的死磕Python后,参加「楼+ Python实战 · 第4期」的学员们感想如何?下面带来他们的真实评价. 作为实验楼的网红课程——「楼+ Python实战」已经走过了第四期,经过了三个 ...
ContestHunter暑假欢乐赛 SRM 05
T1 组合数,求一下乘法逆元就行了没取模没1LL* 爆零了 T2 让最大子段和最小就行,跑最大子段和的时候若超过S就弹出堆中最大的数,每次有负数加进来不断弹出最小的数相加重新加进堆直到为正数,因为 ...
Educational Codeforces Round 48 (Rated for Div. 2) CD题解
Educational Codeforces Round 48 (Rated for Div. 2) C. Vasya And The Mushrooms 题目链接:https://codeforce ...
关于equals与hashcode的重写
我想写的问题有三个: 1.首先我们为什么需要重写hashCode()方法和equals()方法 2.在什么情况下需要重写hashCode()方法和equals()方法 3.如何重写这两个方法 **** ...
bzoj4810 [Ynoi2017]由乃的玉米田 bitset优化+暴力+莫队
[Ynoi2017]由乃的玉米田 Time Limit: 30 Sec Memory Limit: 256 MBSubmit: 917 Solved: 447[Submit][Status][Di ...
POJ 3254 状态压缩 DP
B - Corn Fields Crawling in process... Crawling failed Time Limit:2000MS Memory Limit:65536KB ...
Web前端工程师-优秀简历汇总
Web前端工程师-优秀简历汇总 1. http://www.linqing07.com/resume.html 2. http://www.flqin.com/#page2 3. ht ...

mui 选项卡与header文字同步

mui底部tab固定 头部nav可变

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

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

随机推荐

热门专题

mui底部tab固定头部nav可变