首先是html代码:

 <nav class="mui-bar mui-bar-tab">
<a href="view/templates/home/home.html" class="mui-tab-item mui-active" id="defaultTab">
<span class="mui-icon iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="view/templates/ShopClass/ShopClass.html" class="mui-tab-item">
<span class="mui-icon iconfont icon-shop"></span>
<span class="mui-tab-label">商城</span>
</a>
<a href="view/templates/ShopCart/ShopCart.html" class="mui-tab-item">
<span class="mui-icon iconfont icon-gouwuche"><span class="mui-badge"></span></span>
<span class="mui-tab-label">购物车</span>
</a>
<a href="view/templates/person/person.html" class="mui-tab-item">
<span class="mui-icon iconfont icon-wode"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>

js引用别忘了,引用MUI的js文件

下面是js代码:

 <script type="text/javascript">

    //启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'view/templates/home/home.html',
id:'MainViwe',
styles:{
top: '',
bottom: '51px'
}
}]
}); mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
}); //底部选项卡切换跳转
(function jumpPage(){
//跳转页面
var subpages = ['view/templates/home/home.html','view/templates/ShopClass/ShopClass.html', 'view/templates/ShopCart/ShopCart.html', 'view/templates/person/person.html'];
var subpage_style = {
top: '44px',
bottom: '51px'
};
var aniShow = {};//动画显示
//首次启动切滑效果
//当前激活选项
var activeTab = subpages[];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
$('#MainViwe').attr('src',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>

MUI底部导航栏切换效果的更多相关文章

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

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

  2. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

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

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

  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. html5 导航栏切换效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  8. Flutter - TabBar导航栏切换后,状态丢失

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

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

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

随机推荐

  1. MGR集群搭建

    MGR全称MySQL Group Replication(Mysql组复制),是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决方案.MGR提供了高可用.高扩展.高可靠的MySQL ...

  2. 01.轮播图之二 :tableView 轮播

    在做这个tablevew轮播的时候,重要的就是修改frame 和view 的翻转了:::: 也是不难的,概要的设计和scroll 轮播是一致的: 首先是 .h 的文件 @interface Table ...

  3. 为什么每次登录要手动 source /etc/profile ...

    由于执行顺序如下,故追个查看以下文件,看看是不是 JAVA_HOME, PATH 等环境变量在后面的文件中被重写覆盖了. 1. /etc/profile2. /etc/environment3. ~/ ...

  4. MySQL“Another MySQL daemon already running with the same unix socket”的处理

    方法一: rm var/lib/mysql/mysql.sock service mysqld start 方法二: mv /var/lib/mysql/mysql.sock /var/lib/mys ...

  5. Hyperledger Fabric1.4 手动搭建过程

    1.生成证书: #路径需要更改为自己的路径 cd ~/go/src/github.com/hyperledger/fabric/scripts/fabric-samples/first-network ...

  6. go json解析Marshal和Unmarshal

    Decoder: package main import ( "encoding/json" "fmt" "io" "log&qu ...

  7. 洛谷 题解 UVA1151 【买还是建 Buy or Build】

    [题意] 平面上有\(n(n<=1000)\)个点,你的任务是让所有n个点联通.为此,你可以新建一些边,费用等于两个端点的欧几里得距离平方.另外还有\(q(q<=8)\)个套餐可以购买,如 ...

  8. 学习笔记:(转)Centos7.6安装Oracle11gR2

    目录 原文链接:https://www.cnblogs.com/qianjingchen/articles/10442445.html Windows下安装Oracle比较容易,参考博客:https: ...

  9. HttpClient的几种请求方式

    public static String doPostToken(String tokenUrl,String clientId,String clientSecret,String grantTyp ...

  10. 【51nod】1776 路径计数

    [51nod]1776 路径计数 我们先把前两种数给排好,排好之后会有\(a + b + 1\)个空隙可以填数,我们计算有\(k\)个空隙两端都是相同字母的方案数 可以用枚举把第二种数分成几段插进去来 ...