mui开发APP教程之使用选项卡跳转子页面
来源:互联网 发布:cab软件下载 编辑:程序博客网 时间:2024/06/08 20:10
首页HTML代码:
<!--主页面底部选项卡--> <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="html/index-sub-home.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label"> 首页 </span> </a> <a class="mui-tab-item" href="html/index-sub-classify.html"> <span class="mui-icon mui-icon-list"></span> <span class="mui-tab-label" > 分类 </span> </a> <a class="mui-tab-item" href="html/index-sub-shopCart.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/index-sub-person.html"> <span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label" > 我的 </span> </a> </nav>
js代码:
mui.plusReady(function() { //要切换的子页面 var subpages=[ 'html/index-sub-home.html', 'html/index-sub-classify.html', 'html/index-sub-shopCart.html', 'html/index-sub-person.html']; //子页面样式,这里只有主页的底部是公用的,所以距离底部51个px,距离顶部0个px var subpage_style = { top: '0px', bottom: '51px' }; var aniShow = {}; var self = plus.webview.currentWebview(); for (var i = 0; i < 4; i++) { var temp = {}; 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'); } });});
0 0
- mui开发APP教程之使用选项卡跳转子页面
- mui开发APP教程之年月日级联
- mui开发APP教程之省市区级联
- mui选项卡跳转问题
- mui选项卡跳转问题
- mui开发APP教程之创建项目(一)
- mui开发APP教程之仿天猫购物车
- mui开发APP教程之仿天猫支付弹出自定义框
- mui开发APP教程之上传用户头像
- mui开发APP教程之mui.ajax请求后出现“加载中”
- mui开发APP教程之mui.ajax请求后出现“加载中”
- mui开发APP教程之mui.ajax请求后出现“加载中”
- HTML5+开发移动app教程4-mui中几种open页面的区别
- HTML5+开发移动app教程4-mui中几种打开页面的区别
- MUI-创建子页面
- HTML5+开发移动app教程3-mui开发示例
- HTML5+开发移动app教程3-mui开发示例
- mui 子页面回传值到父页面
- 使用php开发停车场系统,智能停车系统,php程序源码
- c/c++实现模拟洗牌发牌
- 二叉树的建立与遍历
- java集合系列09 Queue
- hdoj-Oil Deposits
- mui开发APP教程之使用选项卡跳转子页面
- TREAP 模板(新)
- Maven搭建SSM项目
- Keras中几个重要函数用法
- 转自一个安卓技术总监的思考问题高度
- php,微信公众号群发系统,微信公众号管理系统,微信公众号素材粉丝管理系统,微信公众号智能定时任务群发
- android 判断网络是否可用
- 使用mp4v2将aac音频h264视频数据封装成mp4开发心得
- Four avaiable ways to install Tor in kali