<!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切换方式以模板的方式访问的更多相关文章

  1. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

  2. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  3. mui 登录之后tab切换页面会失灵

    我的app做完刚进去的时候底部导航栏的tab切换是正常的,但是退出之后重新登录,我在首页用reload进行了刷新,之后就引发了一些问题,tab切换有时候会失灵,登录转态的改变不成功.原来是reload ...

  4. 09 Flutter底部Tab切换保持页面状态的几种方法

    IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...

  5. tab 切换 和 BottomNavigationBar 自定义 底部导航条

    BottomNavigationBar 组件    BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold ...

  6. Android典型界面设计(3)——访网易新闻实现双导航tab切换

    一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...

  7. Android典型界面设计-访网易新闻实现双导航tab切换

    一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...

  8. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  9. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

随机推荐

  1. python2.7安装mysql-python

    环境:python2.7.14+mysql-python-1.2.3.win-amd64-py2.7.exe 安装版本许参照解释器版本,有64和32位之分,如果安装错误版本,则运行时会报错:Impor ...

  2. 使用ccache大幅度加速gcc编译速度至少1倍以上(不需要修改任何编译选项)

    因为我们整个项目都是使用c++开发的,生成的so足有50M,原来编译一遍要三五分钟,一个针对oracle,一个针对mysql,整个轮回下来这部分就要10来分钟,加上代码上传.翻译,一轮配管打包下来二三 ...

  3. android官方开发教程解释（一）

    最近准备系统学一下android开发,这里不会照搬原文,只会针对教程中一些难以理解的部分进行解释,我只是个菜鸟. 在教程第一章——入门基础里面,讲解android主题的那个小节,大概会有以下的代码: ...

  4. python简说（一）if，for等

    一.python简说 python可以用于自动化测试.web开发.数据分析.AI python.自动化运维,第三方模块最多的一个语言. 编译型语言 c.c++ 要运行,先要编译,编译成二进制的. 解释 ...

  5. opencv学习之路（16）、膨胀腐蚀应用之走迷宫

    一.分析 贴出应用图片以供直观了解 红色部分,因图而异(某些参数,根据图片的不同需要进行相应的修改) 二.代码 #include "opencv2/opencv.hpp" #inc ...

  6. map的迭代器

    Iterator<Entry<String,String>> iter=map.entrySet().iterator(); map的迭代器,用作遍历map中的每一个键值对 I ...

  7. windows进程中的几个杂项-hpguard 进程终止

    打印机后台进程 c:\windows\system32\spool printers,servers, tool等, 清空printers中的内容就可以正常打印; 锐爽的后视镜跟其他的车型的后视镜不一 ...

  8. 【做题】TCSRM592 Div1 500 LittleElephantAndPermutationDiv1——计数&dp

    题意:定义函数\(f(A,B) = \sum_{i=1}^n \max(A_i,B_i)\),其中\(A\)和\(B\)都是长度为\(n\)的排列.给出\(n\)和\(k\),问有多少对\((A,B) ...

  9. 论文笔记之：Graph Attention Networks

    Graph Attention Networks 2018-02-06  16:52:49 Abstract: 本文提出一种新颖的 graph attention networks (GATs), 可 ...

  10. vim命令详解

    VIM编辑常用技巧 vim编辑器 简介: vi: Visual Interface,文本编辑器 文本:ASCII, Unicode 文本编辑种类: 行编辑器: sed 全屏编辑器:nano, vi V ...