mui底部菜单实现网页跳转

mui系统自带的tarbar,不能像普通的网页那样实现页面的跳转,如果强制加链接跳转的话,会受到如下报错: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/50935660072

下面我将实现可以像普通网页那样实现页面的跳转。代码如下

网页代码

<!-- 底部tarbar start -->
<div class="mui-bar mui-bar-tab footer-tarbar">
    <a class="mui-tab-item mui-active" href="/">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="/">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" href="/">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
    </a>
    <a class="mui-tab-item" href="/mui/index/my">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</div>
<!-- 底部tarbar end -->


<script>
//这段js可以实现点击tarbar跳转到新的页面。浏览器访问和webview都做了处理。
mui(".footer-tarbar").on("tap","a",function (e){
        var page =  this.getAttribute('href');
        if(typeof(plus) == 'undefined'){
            window.location = page;
        } else {
            plus.webview.show(page,"fade-in",1000);
        }
    })
</script>

You May Also Like