使用Hbuilder的mui框架开发移动端非常便利、高效；

底部导航栏切换功能也是移动APP开发中必须实现的；

引入mui文件、下面会用到jquery，同时引进

<link href="css/mui.min.css" rel="stylesheet"/>

<script type="text/javascript" src="js/jquery.js" ></script>

<script src="js/mui.min.js"></script>

html代码：

　　<header class="mui-bar mui-bar-nav">

        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

        <h1 class="mui-title">首页</h1>

    </header>

    <nav class="mui-bar mui-bar-tab">

        <a href="home.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="message.html" class="mui-tab-item">

            <span class="mui-icon mui-icon-home"></span>

            <span class="mui-tab-label">商城</span>

        </a>

        <a href="setting.html" class="mui-tab-item">

            <span class="mui-icon mui-icon-home"><span class="mui-badge"></span></span>

            <span class="mui-tab-label">购物车</span>

        </a>

    </nav>

在index的同级目录下创建首页，商城和购物车页面，home.html、message.html、setting.html作为分页；

js代码：

<script type="text/javascript">

    //启用双击监听

        mui.init({

            gestureConfig:{

                doubletap:true

            },

            subpages:[{

                url:'home.html',

                id:'MainViwe',

                styles:{

                    top: '30px',

                    bottom: '51px'

                }

            }]

        });

    mui('.mui-scroll-wrapper').scroll({

        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

    });

//底部选项卡切换跳转

(function jumpPage(){

        //跳转页面

        var subpages = ['home.html','message.html', 'setting.html'];

        var subpage_style = {

            top: '44px',

            bottom: '51px'

        };

        var Index=;

        var actTab=subpages[Index],

            tittle=document.querySelector('.mui-title');

        var aniShow = {};//动画显示

        //首次启动切滑效果

             //当前激活选项

            var activeTab = subpages[];

             //选项卡点击事件

            mui('.mui-bar-tab').on('tap', 'a', function(e) {

                //修改对应分页

                var targetTab = this.getAttribute('href');

                $('#MainViwe').attr('src',targetTab);

                //修改标题

                tittle.innerHTML=this.querySelector('.mui-tab-label').innerHTML;

            });

             //自定义事件，模拟点击“首页选项卡”

            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>

切换分页的同时也切换了对应标题

分页home.html

<!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" />

    </head>

    <body>

        <div class="mui-content">

            <ul class="mui-table-view">

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

                <li class="mui-table-view-cell"></li>

            </ul>

        </div>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init()

        </script>

    </body>

</html>

效果：

...

作此随笔以便记录、记录

mui底部导航栏切换分页的更多相关文章

  1. MUI底部导航栏切换效果

    首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...

  2. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  3. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  4. mui 底部导航栏

    mui 底部导航栏 <nav class="mui-bar mui-bar-tab " id="nav"> <a class="mu ...

  5. mui 底部导航栏的实现

    mui 底部导航栏的实现 <nav class="mui-bar mui-bar-tab"> <a id="display" class=&q ...

  6. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  7. Flutter - TabBar导航栏切换后，状态丢失

    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...

  8. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  9. 使用mui框架开发App,当input获取焦点时，键盘弹出，底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

随机推荐

  1. HDU - 1241 dfs or bfs [kuangbin带你飞]专题一

    8个方向求联通块,经典问题. AC代码 #include<cstdio> #include<cstring> #include<algorithm> #includ ...

  2. Spark源码编译（未完待续）

    在这里我们不需要搭建独立的Spark集群,利用Yarn Client调用Hadoop集群的计算资源. Spark源码编译生成配置包: 解压源码,在根去根目录下执行以下命令(sbt编译我没尝试) ./m ...

  3. webpack打包速度和性能再次优化

    一. 改单dll为双dll 因为上图原因,使用CommonsChunkPlugin时,导致其打包出来的vendors.js内的模块ID会因为其他文件引用模块数量的变化而变化. 所以现利用DllPlug ...

  4. 2_成员函数（Member Functions)

    成员函数以定从属于类,不能独立存在,这是它与普通函数的重要区别.所以我们在类定义体外定义成员函数的时候,必须在函数名之前冠以类名,如Date::isLeapYear().但如果在类定义体内定义成员函数 ...

  5. 笔记︱范数正则化L0、L1、L2-岭回归&Lasso回归（稀疏与特征工程）

    机器学习中的范数规则化之(一)L0.L1与L2范数 博客的学习笔记,对一些要点进行摘录.规则化也有其他名称,比如统计学术中比较多的叫做增加惩罚项:还有现在比较多的正则化. -------------- ...

  6. JSP中的编译指令和动作指令的区别

    JSP中的编译指令和动作指令的区别 1.编译指令是通知Servlet引擎的处理消息,而动作指令只是运行时的脚本动作 2.编译指令是在将JSP编译成Servlet时起作用,而动作指令可替换成JSP脚本, ...

  7. Java中的三目运算符

    1.问题背景    以下代码运行的结果是:    A.hai    B.1987    C.1988    D.以上答案都不对 /** * 三目运算符 * A.hai * B.1987 * C.198 ...

  8. SCADA系统

    简介编辑 在电力系统中,SCADA系统应用最为广泛,技术发展也最为成熟.它在远动系统中占重要地位,可以对现场 SCADA系统 的运行设备进行监视和控制,以实现数据采集.设备控制.测量.参数调节以及各类 ...

  9. TOJ 4120 Zombies VS Plants

    链接:http://acm.tju.edu.cn/toj/showp4120.html 4120.   Zombies VS Plants Time Limit: 1.0 Seconds   Memo ...

  10. Python 学习笔记（二）开发环境的搭建

    安装Python windows 下安装: 下载地址:https://www.python.org/downloads Python的版本 3.x 是趋势 2.x 还在被大量使用 至于使用2.x 还是 ...