设为首页 加入收藏

TOP

MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换(四)
2019-09-03 03:11:56 】 浏览:59
Tags:MUI 框架 开发 HTML5手机 APP 页面 底部 选项 切换
i > 0) { sub.hide(); } /* 让新创建的webview,追加合并到当前的窗口上。合并成一个窗口。 * 目的:将父子窗口合并成一个页面,实现同开同关的效果。 避免点击返回安监室,子页面先关闭,而父页面的头部和尾部没有关闭的BUG。 */ 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; });

每一行代码的详细作用,均已在代码注释中详细说明 ,但是对于很多新手同学,可能理解起来依然存在一定的问题,所以贴心的杰小瑞老师准备了极大程度的简化版本。

 

4底部选项卡切换(杰小瑞老师简化版)

 

上面的代码虽然功能强大,但是代码杂乱,很不容易理解,我们可以在保留原来的HTML的基础上,将JS代码进行极大程度的简化处理:

mui.plusReady(function(){
    var pages = ["a.html","b.html","c.html","d.html"];
    var arr = document.getElementsByClassName("mui-tab-item")
    var styles = {
        top:"45px",
        bottom:"51px"
    }
    var pageArr = [];
    var slef = plus.webview.currentWebview();
    for(var i=0; i<arr.length; i++){
        // 有几个选项卡,需要创建几个子页面
        var page = plus.webview.create(pages[i],pages[i],styles);
        pageArr.push(page);
        !function(i){
            arr[i].addEventListener("tap",function(){
                // 让当前页面(i)显示,不是当前页面隐藏
                for(var j=0; j<pageArr.length; j++){
                    if(j!=i) pageArr[j].hide();
                    else pageArr[j].show();
                }
                /* 让新创建的webview,追加合并到当前的窗口上。合并成一个窗口。
                 * 目的:将父子窗口合并成一个页面,实现同开同关的效果。 避免点击返回安监室,子页面先关闭,而父页面的头部和尾部没有关闭的BUG。
                 */
                slef.append(pageArr[i]);
            })
        }(i);
    }
    // 默认触发第0个选项卡的tap事件。
    mui.trigger(arr[0],"tap");
});

 

怎么样,代码是不是简洁很多了呢?一起来看看最终效果吧!!

 

  好了,今天的内容就先到这了,下篇博客让我们继续探讨MUI的更高级功能吧!由于博客描述有限,使用过程中有任何问题,欢迎评论留言讨论哦~~

  

  如果需要源码,请点击下载链接进行下载。

 

作者:杰瑞教育
出处: http://www.cnblogs.com/jerehedu/ 
版权声明:本文版权归 杰瑞教育 技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:JRedu技术交流

 

首页 上一页 1 2 3 4 下一页 尾页 4/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇课时13.标签的分类(掌握) 下一篇利用css transition属性实现一个..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目