使用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. PAT1001 A+B Format

    思路:每三位分割,注意符号,首位不要出现逗号. AC代码 #include <stdio.h> #include <algorithm> using namespace std ...

  2. HDU - 3085 双向BFS + 技巧处理 [kuangbin带你飞]专题二

    题意:有两只鬼,一个男孩女孩被困在迷宫中,男孩每秒可以走三步,女孩只能1步,鬼可以两步且可以通过墙.问男孩女孩是否可以在鬼抓住他们之前会合? 注意:每秒开始鬼先移动,然后两人开始移动. 思路:以男孩和 ...

  3. linux命令学习汇总

    1. touch 命令 touch -简单来说touch 命令可以用来建立文件 文件不存在的情况下,也可以更改创建时间等等 2. pwd 查看目录---一般看目录用pwd 即可但是pwd -P 会不以 ...

  4. NewLife.XCode 上手指南2018版（二）增

    目录 NewLife.XCode 上手指南2018版(一)代码生成 NewLife.XCode 上手指南2018版(二)增 NewLife.XCode 上手指南2018版(三)查 NewLife.XC ...

  5. java:替换字符串中的ASCII码

    可对照查看网盘ASCII表http://yunpan.cn/cyxg4wQjQaGEQ (提取码:8b29) public static void main(String[] args) { // / ...

  6. 关于 target="_blank"漏洞的分析

    创建: 于 八月 30, 2016 关于 target="_blank"漏洞的分析  一.漏洞详情:首先攻击者能够将链接(指向攻击者自己控制的页面的,该被控页面的js脚本可以对母页 ...

  7. GetWindowRect、GetClientRect、ScreenToClient与ClientToScreen

    GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标(包括客户区和非客户区),这样可以得到窗口的大小和相对屏幕左上角(0,0)的位置. GetClientRect取得窗口客户区(不包括非客 ...

  8. [php] php操作xml

    xml文件 <?xml version="1.0" encoding="ISO-8859-1"?> <root> <item id ...

  9. dedecms 使用自由列表实现首页列表分页

  10. Flex中的FusionCharts 3D柱形图

    1.3D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...