设为首页 加入收藏

TOP

MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换(三)
2019-09-03 03:11:56 】 浏览:61
Tags:MUI 框架 开发 HTML5手机 APP 页面 底部 选项 切换
quot;
href="#page1"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="#page2"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">电话</span> </a> <a class="mui-tab-item" href="#page3"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">邮件</span> </a> <a class="mui-tab-item" href="#page4"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <div class="mui-content"> <div id="page1" class="mui-control-content mui-active"> 这是第一个页面 </div> <div id="page2" class="mui-control-content"> 这是第二个页面 </div> <div id="page3" class="mui-control-content"> 这是第三个页面 </div> <div id="page4" class="mui-control-content"> 这是第四个页面 </div> </div>

代码解释:

这种方式的实现,只需要给代表每个子页面的div,添加mui-control-content类即可,同时用mui-active表示默认加载的第一个子页。

写好子页DIV后,给每个div起一个id,并且将这个id与底部选项卡中的每个a标签的href属性相关联,即可实现选项卡的切换。

 

3底部选项卡切换(WebView模式)

 

使用WebView模式的选项卡切换,首先需要创建多个子页面的HTML文件,而主页中,只需要头部和尾部即可,其他功能交给JS操作:

<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title" id="title">首页</h1>
        </header>
        
        <nav class="mui-bar mui-bar-tab">
            <a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="b.html">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a class="mui-tab-item" href="c.html">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">通讯录</span>
            </a>
            <a class="mui-tab-item" href="d.html">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>

HTML代码的简洁,必然造成JS代码的相对复杂,但是也很简单,大家使用粘贴复制大法即可:

        var subpages = ['a.html', 'b.html', 'c.html', 'd.html'];
        var subpage_style = {
            top: '45px',
            bottom: '51px'
        };
            
        var aniShow = {};
            
         //创建子页面,首个选项卡页面显示,其它均隐藏;
        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            for (var i = 0; i < 4; i++) {
                var temp = {};
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                if (
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇课时13.标签的分类(掌握) 下一篇利用css transition属性实现一个..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目