MUI实现底部导航切换界面

HTML部分:

<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-videocam"></span>
        <span class="mui-tab-label">社区</span>
    </a>
    <a class="mui-tab-item" href="message.html">
        <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span>
        <span class="mui-tab-label">群组</span>
    </a>
    <a class="mui-tab-item" href="b.html">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

JavaScript部分:

//创建子页面
var subpages = ['a.html','message.html','b.html'];// 修改对应图标连接的地址,记住需要对应
var subpage_style = {
    top: '0px',
    bottom: '50px',
    scrollIndicator: "none" ,// 当你的界面的内容足够多的时候,会出现滚动条,这个是隐藏滚动条
};
             
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function(){
    //获得当前页面
    var self = plus.webview.currentWebview();
    //循环创建子页面
    for(var i=0;i<subpages.length;i++){
        var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
        var sub = plus.webview.create(
            'a.html', // 默认显示页面
            'a.html',{
    top: '0px',
    bottom: '50px',
    scrollIndicator: "none" ,// 当你的界面的内容足够多的时候,会出现滚动条,这个是隐藏滚动条
});
        if(i>0){
            sub.hide();
        }
        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;
    }
    //显示目标选项卡
    plus.webview.show(targetTab);
    //隐藏当前;
    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');
    }
});
Last modification:December 14th, 2017 at 11:35 pm
If you think my article is useful to you, please feel free to appreciate

2 comments

  1. 风月残华

    为什么我把你的复制下来却切换不了啊

    1. benhailong
      @风月残华

      可以啊,你什么问题,加QQ吧:694201656

Leave a Comment