首先是简单的进行页面切换实现
以下代码是利用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内,再续写四个子页面,通过监听的方法进行调用某个子页面