mui 配置底部tab切换方式以模板的方式访问
<!doctype html>
<html lang="en">
<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 rel="stylesheet" type="text/css" href="css/mui.css"/>
<!--修正样式文件引入-->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
</head>
<body> <!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav reHeaderBoxShadow">
<a class="" href="#offCanvasSide"></a>
<h1 class="mui-title" id="title">首页</h1>
</header>
<!-- 底部nav-->
<nav class="mui-bar mui-bar-tab">
<a href="templates/sub1.html" class="mui-tab-item mui-active" id="defaultTab">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="templates/sub2.html" class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a href="templates/sub3.html" class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a href="templates/sub4.html" class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> mui.init(); mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
}); //底部选项卡切换跳转
(function jumpPage(){
//跳转页面
var subpages = ['templates/sub1.html','templates/sub2.html', 'templates/sub3.html', 'templates/sub4.html'];
var subpage_style = {
top: '44px',
bottom: '51px'
};
var aniShow = {};//动画显示
//首次启动切滑效果
mui.plusReady(function(){
// launchScreen(); var self = plus.webview.currentWebview();
for (var i = ; i < ; i++) {
var temp = {};
//http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > ) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);//合并对象
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href');
console.log(targetTab);
if (targetTab == activeTab) {
return;
}
//更换标题
var title = document.getElementById("title");
console.log(this.querySelector('.mui-tab-label').innerHTML);
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//若为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",);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
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>
mui 配置底部tab切换方式以模板的方式访问的更多相关文章
- Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换
一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...
- Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...
- mui 登录之后tab切换页面会失灵
我的app做完刚进去的时候底部导航栏的tab切换是正常的,但是退出之后重新登录,我在首页用reload进行了刷新,之后就引发了一些问题,tab切换有时候会失灵,登录转态的改变不成功.原来是reload ...
- 09 Flutter底部Tab切换保持页面状态的几种方法
IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...
- tab 切换 和 BottomNavigationBar 自定义 底部导航条
BottomNavigationBar 组件 BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- Android典型界面设计-访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
随机推荐
- VMware Workstation Pro14安装
1. 下载VMware Workstation Pro14,注意,这个链接支持win7 64及以上系统 2. 点击进入安装 3. 接受许可协议 4. 选择安装目录,是否选择增强型键盘驱动程序 5. ...
- P1297 [国家集训队]单选错位(期望)
P1297 [国家集训队]单选错位 期望入门 我们考虑涂到第$i$道题时的情况 此时题$i$答案有$a[i]$种,我们可能涂$a[i+1]$种 分类讨论: 1.$a[i]>=a[i+1]$: 可 ...
- MySql数据库表操作(二)
一.增加表记录: insert [into] tab_name (field1,field2....) values (values1,values2....) , (values1,values2. ...
- 【题解】Luogu SP3267 DQUERY - D-query
原题传送门 这题和Luogu P1972 [SDOI2009]HH的项链很像,只是数据大小有些差别,题解 我博客里对莫队的介绍 我们在排序询问时,普通是这样qaq inline bool cmp(re ...
- MYSQL之MHA集群
环境 manager 192.168.137.141 master1 192.168.137.144 master2 192.168.137.145 slave 192.168.137.141 vip ...
- android 文本框不获取焦点的两种方式
当进入一个页面以后,我们不希望EditText获取焦点自动弹出软键盘,占据大半个屏幕. 方法一 让LinearLayout率先获取焦点,代码如下: <LinearLayout android:f ...
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) Problem E (Codeforces 831E) - 线段树 - 树状数组
Vasily has a deck of cards consisting of n cards. There is an integer on each of the cards, this int ...
- centos7 install fastdfs nginx
https://github.com/judasn/Linux-Tutorial/blob/master/markdown-file/FastDFS-Nginx-Lua-GraphicsMagick. ...
- 2018年11月20日 远交近攻 list1
list 列表用法 li=[1,2,3,"abc"] #列表中的元素,可以为数字或者字符串或者布尔值或者就是列表等,所有都能放进去 #列表中也能嵌套列表 pi=[1,2,3,[2, ...
- 对html标签 元素 以及css伪类和伪元素的理解
标签:这应该都知道.<br/> .<a>.<p></p> 等都是标签. 元素:标签开始到结束.比如:<p>p之间的内容</p> ...