mui主页下部tab栏切换

最新推荐文章于 2021-06-09 11:42:02 发布

weixin_34203832

最新推荐文章于 2021-06-09 11:42:02 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lijia-kapok/p/7229474.html

版权

为了不像官方演示的那样把所有tab页都塞在一个html里面造成卡顿，所以，将首页和各个tab页分开。

页面html结构如下：

<body>
　　<header class="mui-bar mui-bar-nav" style="color:;">
　　　　<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left mui-icon-contact"></a>
　　　　<h1 id="title" class="mui-title" style="color:white;background-color:;">移动平台</h1>
　　</header>
　　<nav class="mui-bar mui-bar-tab">
　　　　<a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">
　　　　　　<span class="mui-icon mui-icon-home"></span>
       　　<span class="mui-tab-label">流程</span>
   　　</a>
   　　<a id="dotTab" class="mui-tab-item" href="gis.html">
   　　　　<span class="mui-icon mui-icon-map"></span>
      　　<span class="mui-tab-label">网点</span>
   　　</a>
   　　<a id="caseTab" class="mui-tab-item" href="case.html">
      　　<span class="mui-icon mui-icon-email"></span>
      　　<span class="mui-tab-label">案件</span>
   　　</a>
　　</nav>
</body>

JavaScript部分：

var menu = null,main = null;
var showMenu = false;
//mui初始化
mui.init();
var subpages = ['homepage.html', 'gis.html', 'case.html'];
var subpage_style = {
　　top: '45px',
　　bottom: '51px',
　　hardwareAccelerated: true//开启硬件加速
};
var aniShow = {};
mui.plusReady(function() {
　　var self = plus.webview.currentWebview();
　　for(var i = 0; i < 3; 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];
　　var title = document.getElementById("title");
　　//选项卡点击事件
　　mui('.mui-bar-tab').on('tap', 'a', function(e) {
　　　　var targetTab = this.getAttribute('href');
　　　　if(targetTab == activeTab) {
　　　　　　return;
　　　　}
       //更换标题
　　　　title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
　　　　//显示目标选项卡
　　　　//若为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');
       }
   });
});

个人测试是可行的，欢迎指正啊。

转载于:https://www.cnblogs.com/lijia-kapok/p/7229474.html

weixin_34203832

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui主页下部tab栏切换

为了不像官方演示的那样把所有tab页都塞在一个html里面造成卡顿，所以，将首页和各个tab页分开。页面html结构如下：<body>　　<header class="mui-bar mui-bar-nav" style="color:;">　　　　<a href="#offCanvasSide" class="mui-icon mui-actio...
复制链接

扫一扫