使用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. UVA-10954 贪心+优先队列

    贪心策略:每次选取最小的两个数相加,将和作为新的数加入序列,再从里面取两个最小的数...直到只剩下一个数.优先队列正好对付这题. PS :以前在学校OJ做过几乎一毛一样的这题 AC代码: #inclu ...

  2. 使用IntelliJ IDEA 和 Maven创建Java Web项目

    1. Maven简介 相对于传统的项目,Maven 下管理和构建的项目真的非常好用和简单,所以这里也强调下,尽量使用此类工具进行项目构建, 它可以管理项目的整个生命周期. 可以通过其命令做所有相关的工 ...

  3. AES-256加密解密

    /// <summary> /// AES-256加密 /// </summary> /// <param name="toEncrypt">& ...

  4. linux之x86裁剪移植---字符界面sdl开发入门

    linux下有没有TurboC2.0那样的画点.线.圆的图形函数库,有没有grapihcs.h,或者与之相对应或相似的函数库是什么?有没有DirectX这样的游戏开发库?SDL就是其中之一. SDL( ...

  5. 【memcache】windos下 memcache更改默认的端口和最大使用内存

    1>用内网ip的方式提供web应用服务器调用,不允许直接通过外网调用,如将memcache服务器放在192.168.1.55的服务器上 2>修改端口,如改为11200 3>分配内存, ...

  6. Excel 2010高级应用-面积图（三）

    Excel 2010高级应用-面积图(三) 操作过程如下: 1.新建Excel空白文档,重新命名为面积图 2.单击"插入",找到面积图图样 3.选择其中一种类型的面积图,单击并在空 ...

  7. Caused by: java.sql.SQLException: Operand should contain 1 column(s)

    1.错误描述 [ERROR:]2015-05-05 15:48:55,847 [异常拦截] org.hibernate.exception.DataException: error executing ...

  8. Flex报错之一

    1.错误描述 TypeError: Error #1009: 无法访问空对象引用的属性或方法. at com.gwtjs.components::DetailWindow/completeHandle ...

  9. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  10. Linux集群问题~浅谈

    系统扩展的方式 # scale up 向上扩展 # scale out 向外扩展 集群类型 LB 负载均衡集群 Load Balancing HA 高可用集群 High Availability HP ...