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, ...
随机推荐
- 具体数学二项式至生成函数章-----致敬Kunth
关于标题取得这么奇怪.因为在具体数学中.这两章是分开叙述的.并且分别叙述得淋漓尽致! 我只参悟其中关于生成函数的一小部分内容(暂时于我够用了.) 提二项式系数之前不得不提组合数.以往在高中用的是符号C ...
- [HNOI2009]有趣的数列 卡特兰数
题面:[HNOI2009]有趣的数列 题解: 观察到题目其实就是要求从长为2n的序列中选n个放在集合a,剩下的放在集合b,使得集合a和集合b中可以一一对应的使a中的元素小于b. 2种想法(实质上是一样 ...
- [HNOI2010]合唱队 区间DP
---题面--- 题解: 偶然翻到这道题,,,就写了. 观察到一个数被插在哪里只受前一个数的影响,如果明确了前一个数是哪个,那么我们就可以确定大小关系,就可以知道当前这个数插在哪里,而上一个插入的数就 ...
- 【luogu2181】对角线
首先由于不会有三条对角线交于一点,所以过某一个交点有且只能有2条对角线 而这两条对角线实质上是确定了4个顶点(也可以看做是一个四边形的两条对角线交于一点,求四边形的数量). 因此我们只需要确定4个顶点 ...
- SPOJ8222/NSUBSTR:Substrings——题解
https://www.luogu.org/problemnew/show/SP8222#sub http://www.spoj.com/problems/NSUBSTR/ 翻译来自洛谷. 你得到一个 ...
- IDEA中使用Docker: 图形化 or 命令行 ,你更稀罕那个??
Docker简介: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 容器是完全使用沙箱机 ...
- HDU 4771 (DFS+BFS)
Problem Description Harry Potter has some precious. For example, his invisible robe, his wand and hi ...
- Uva-oj Palindromes 暴力
Palindromes Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Statu ...
- stout代码分析之十一:hashmap和multihashmap
hashmap是std::unordered_map的子类,前者对后者的接口做了进一步封装. hashmap的移动构造函数: hashmap(std::map<Key, Value>&am ...
- eclipse ----- indexer
使能indexer,可以实现变量.函数等的跳转, 即跳转到定义的位置