mui底部导航栏几种页面跳转方式

首先是简单的进行页面切换实现

以下代码是利用mui的框架打出来底部标签栏框架。

 

 

 方式一之页面切换：利用a标签中的href属性直接进行跳转

利用mui进行app开发，mui是一个基于h5+的前端框架，因此使用href属性值直接进行跳转还是可以的，不过在移动端点击会出现白屏闪动的现象

代码如下：

 

 

 注意：mui框架屏蔽了onclick和href事件。解决方法：绑定tab使用js跳转 代码如下:

mui('body').on('tap','a',function(){
        document.location.href=this.href;
    });

方式二之页面切换：利用a标签中的href属性间接进行跳转

这种方式 同样不流畅,没有充分利用mui的特性与优点,用户体验也不是很好.

 

 方式三之页面切换：为a标签id属性赋值，进行页面跳转

这种方式是利用mui所封装的函数进行跳转，从前两方式到第三种有明显的差距，第三种是不会出现人和闪屏和等待延迟。也存在问题,就是 切换页面之后,安卓的物理返回键,返回之后,页面变了, 但是底部导航图标文字没有切换

代码如下:

给a标签附一个id  然后就mui自带函数,打开新页面

<a class="mui-tab-item" id="self" >
    <span class="mui-icon mui-icon-contact"></span>
    <span class="mui-tab-label">我的</span>
</a>

mui.plusReady(function(){
    document.getElementById('self').addEventListener('tap',function()    {
        mui.openWindow({
        url :"self.html",
        id  :"self"
        });
    });
});

方式4最好的方法: 采用将底部导航栏单独写入一个html内，再续写四个子页面，通过监听的方法进行调用某个子页面