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');
    }
});

发表评论

发表评论

已有 9 条评论

  1. 风月残华
    风月残华

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

    1. benhailong
      benhailong

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

  2. apas
    apas

    为什点击其他选项卡,首页闪一下后才切换

    1. benhailong
      benhailong

      MUi渲染的问题

  3. 凡客
    凡客

    使用后出现闪退,不知道原因

    1. benhailong
      benhailong

      你们是做的APP还是网页?

  4. haha
    haha

    请问 plus 报错 plus is not defined 怎么回事

  5. 多年以后
    多年以后

    没有效果,能教一下吗

  6. rain
    rain

    不出来