Mui 底部导航切换
1.建好子模板目录
2.导航代码
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="html/home1.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">
首页
</span>
</a>
<a class="mui-tab-item" href="html/home2.html">
<span class="mui-icon mui-icon-list"></span>
<span class="mui-tab-label" >
分类
</span>
</a>
<a class="mui-tab-item" href="html/home3.html">
<span class="mui-icon iconfont icon-cart">
<span class="mui-badge" id="shopCartCount">2</span>
</span>
<span class="mui-tab-label">
购物车
</span>
</a>
<a class="mui-tab-item" href="html/home4.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label" >
我的
</span>
</a>
</nav>
3.js代码
<script>
mui.plusReady(function() {
//要切换的子页面
var subpages=[
'html/home1.html',
'html/home2.html',
'html/home3.html',
'html/home4.html'];
//子页面样式,这里只有主页的底部是公用的,所以距离底部51个px,距离顶部0个px
var subpage_style = {
top: '0px',
bottom: '51px'
};
var aniShow = {};
var self = plus.webview.currentWebview();
for (var i = 1; i < 4; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i],subpages[i],subpage_style,{});
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
//当前激活选项
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为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",300);
}
//隐藏当前;
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>
Mui 底部导航切换的更多相关文章
- MUI底部导航切换子页面
1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染. <nav class="mui-bar mui-bar-tab" id=&q ...
- vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
- mui 底部导航栏
mui 底部导航栏 <nav class="mui-bar mui-bar-tab " id="nav"> <a class="mu ...
- mui 底部导航栏的实现
mui 底部导航栏的实现 <nav class="mui-bar mui-bar-tab"> <a id="display" class=&q ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- MUI底部导航栏切换效果
首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...
- mui底部选项卡切换实现
MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转
- 微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
随机推荐
- EBS常用表_Dictionary
EBS常用表:转载于 https://blog.csdn.net/xiariqingcao/article/details/8775827 . OU.库存组织 SELECT hou.organizat ...
- 几种常用的java 实现反转的方法———reverse
1.最简单的方法 public static String reverse1(String str) return new StringBuffer(str).reverse().toString() ...
- Java高并发程序设计学习笔记(三):Java内存模型和线程安全
转自:https://blog.csdn.net/dataiyangu/article/details/86412704 原子性有序性可见性– 编译器优化– 硬件优化(如写吸收,批操作)Java虚拟机 ...
- go语言入门(3)运算符及流程控制
1,运算符 算数运算符:+ - * / % ++ -- 关系运算符:== != < > <= >== 逻辑运算符:按位与 ...
- vue+axios请求头封装
import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...
- 【死磕 Java 集合】— ConcurrentSkipListMap源码分析
转自:http://cmsblogs.com/?p=4773 [隐藏目录] 前情提要 简介 存储结构 源码分析 主要内部类 构造方法 添加元素 添加元素举例 删除元素 删除元素举例 查找元素 查找元素 ...
- Asp.Net Zero通用打印实现
Asp.Net Zero是一款非常优秀的web框架,可以用来快速构建业务系统.框架满足了业务系统所需的大部分通用功能,但是系统必须的打印报表功能一直没有实现.下面给大家介绍如何在zero中集成打印功能 ...
- CF #546 D.E
D coun[i]表示[i]这个数右边有多少个数j能和他组成题中所给的二元组(i,j) 如果一个数的coun[i]=n-i-ans 那么说明他可以与最后一个交换 同时不计算贡献 因为它是向右走的 对左 ...
- axios 请求多个接口
axios.all([ axios.get('https://api.github.com/xxx/1'), axios.get('https://api.github.com/xxx/2') ]) ...
- spring RestTemplate 出现 NoHttpResponseException 和 ConnectionTimeoutException
使用 httpclient.4.5.6 springboot 2.0.8RELEASE RetryExec.java CloseableHttpResponse execute() try { ret ...