MUI底部导航切换子页面
1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染。
<nav class="mui-bar mui-bar-tab" id="tabbar">
<a class="mui-tab-item mui-active" href="html/applyy.html" id="apply">
<span class="mui-icon apply"></span>
<span class="mui-tab-label ">申请</span>
</a>
<a class="mui-tab-item" href="html/getmedicine.html" id="getmedicine">
<span class="mui-icon getmedicine"></span>
<span class="mui-tab-label ">领药</span>
</a>
<a class="mui-tab-item" href="html/me.html" id="me">
<span class="mui-icon me"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
2.css部分,点击高亮切换图片。
#mui-bar {
height: 1rem!important;
border-top: 0.8rem;
} .mui-tab-item {
text-align: center;
} .mui-icon {
margin-left: 0.1rem;
width: 0.5rem!important;
height: 0.5rem!important;
} .mui-tab-label {
color: #999999;
font-size:13px!important;
} .mui-active .mui-tab-label {
color: #00cec5;
font-size:13px!important;
} .apply {
background: url(images/index/apply.png)0 0.02rem no-repeat;
background-size: 0.4rem 0.45rem;
} .mui-active .apply {
background: url(images/index/applyactive.png)0 0.02rem no-repeat;
background-size: 0.4rem 0.45rem;
} .getmedicine {
background: url(images/index/get.png)0 0.02rem no-repeat;
background-size: 0.4rem 0.45rem;
} .mui-active .getmedicine {
background: url(images/index/getactive.png)0 0.02rem no-repeat;
background-size: 0.4rem 0.45rem;
} .me {
background: url(images/index/me.png)0 0.02rem no-repeat;
background-size: 0.4rem 0.45rem;
} .mui-active .me {
background: url(images/index/meactive.png)0 0.02rem no-repeat;
background-size: 0.4rem 0.45rem;
}
3,js部分
// 初始化mui.init()写在这里
mui.init();
//设置默认打开首页显示的子页序号;
var Index = 0;
//把子页的路径写在数组里面
var subpages = ['html/applyy.html', 'html/getmedicine.html', 'html/me.html']; //把子页的路径写在数组里面
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for(var i = 0; i < 3; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '0', //设置距离顶部的距离
bottom: '50px' //设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏,否则添加到窗口中
if(i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
}); //当前激活选项
var activeTab = subpages[Index],
title = document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
//获取目标子页的id
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//更换标题
// h1.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
}); //自定义事件,模拟点击“首页选项卡”
//申请页面
window.addEventListener('apply', function() {
location.reload();
var apply= document.getElementById("apply");
//模拟首页点击
mui.trigger(apply, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(apply!== current) {
current.classList.remove('mui-active');
apply.classList.add('mui-active');
} }); //领药页面
document.addEventListener('getmedicine', function() {
var getmedicine = document.getElementById("getmedicine");
//模拟首页点击
mui.trigger(getmedicine, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(getmedicine !== current) {
current.classList.remove('mui-active');
getmedicine.classList.add('mui-active');
} }); //我的页面
document.addEventListener('me', function() {
location.reload();
var me= document.getElementById("me");
//模拟首页点击
mui.trigger(me, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(me !== current) {
current.classList.remove('mui-active');
me.classList.add('mui-active');
}
});
4.子页面需要调用的。
//领药结束跳转页面
$("#end").click(function(){
mui.fire(plus.webview.currentWebview().opener(),"apply");
})
MUI底部导航切换子页面的更多相关文章
- Mui 底部导航切换
1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" c ...
- mui 底部导航栏
mui 底部导航栏 <nav class="mui-bar mui-bar-tab " id="nav"> <a class="mu ...
- vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
- 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中如何使用tab来切换子页面 mui-bar, mui-bar-tab
mui是前端框架但是很多人用它写移动端 那么mui底部切换是怎么做到的呢? 如何点击某个tab来切换不同的页面? 解答: 1首先我们需要引入mui框架的底部tab元素 代码如下 <!--tabl ...
- ionic2 子页面隐藏去掉底部tabs导航,子页面全占满显示方法(至今为止发现的最靠谱的方法)
项目中遇到 tabs 字页面 可以用以下代码隐藏的方式: imports: [ BrowserModule, // IonicModule.forRoot(MyApp), HttpModule, Io ...
- mui底部选项卡切换实现
MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转
随机推荐
- 运行错误:Application Error - The connection to the server was unsuccessful
在模拟器上上启动ionic4.6版本 打包成的android APK,启动了很久结果弹出这个问题: Application Error - The connection to the server w ...
- Linux(Ubuntu)使用日记------Mongodb的安装与使用
1.安装 Linux下安装mongodb还是比较容易的 直接使用apt-get安装即可,命令如下: sudo apt-get install mongodb 安装完成之后进行检验, “mongo sh ...
- ABP中的Filter(下)
接着上面的一个部分来叙述,这一篇我们来重点看ABP中的AbpUowActionFilter.AbpExceptionFilter.AbpResultFilter这三个部分也是按照之前的思路来一个个介绍 ...
- 浅析Java的Object类
前言: 最近在回顾Java基础,在此过程中,查看源码是少不了的 这里以JDK8以基准,记录一些自己查看源码的观感 Object类,翻阅源码,看看这个类的所在位置,是在 java.lang 包下 ...
- [ffmpeg] h264并行解码
ffmpeg中的并行解码分为两种: Frame-level Parallelism Slice-level Parallelism Frame-level Parallelism 帧间依赖 我们之前讨 ...
- vscode 配置c++
https://zhuanlan.zhihu.com/p/36654741 按照以上教程配置时 出现"preLaunchTask": "build", erro ...
- Xilinx FPGA引脚txt文件导入excel中
需求 为了把xilinx FPGA的官方引脚文件txt转成excel文件(实际官网中有对应的csv文件就是excel文件了...) xilinx FPGA引脚地址:https://china.xili ...
- docker 镜像备份magento 2.2.3
打包百度网盘: 链接:https://pan.baidu.com/s/1i_lSLt48RlxPonVA7qG5kg 密码:h1de 还原:docker load < (filename).t ...
- .Net Core实践3 配置文件
环境 .netcore2.1 / vs2017 / win10 / centos7 在.netcore项目中读取配置文件,先添加应用程序配置文件App.config.这个是类库项目的配置文件名. Sy ...
- P1177 【模板】快速排序(学完归并和堆排之后的二更)
P1177 [模板]快速排序 不用说,连题目上都标了是一道模板,那今天就来对能用到的许多排序方式进行一个总结: 选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理 ...