MUI-底栏实现-页面切换

MUI-底栏实现-页面切换：通过“窗口管理”和“事件”来实现页面切换的效果。
界面展示：

第一步：底部选项卡制作

第二步：窗口对象设置

// 第二步：窗口对象设置。首先定义一个数组，把所有页面的html的名字存储下来
 var subpage = ["home.html","wealth.html","praise.html","friends.html","mine.html"];
 // 添加页面：得到当前页面的窗口对象，再得到另外五个页面的窗口对象，最后使用一个append方法将其添加进来即可
 mui.plusReady(function () {// 先得到当前页面的窗口对象var currentWebview = plus.webview.currentWebview();for(var i= 0;i < 5;i++){// 将五个页面对应的窗口对象都创建出来var sub = plus.webview.create(subpage[i],subpage[i],{top:"50px",bottom:"50px"});// 将子窗口对象添加到当前页面窗口对象中currentWebview.append(sub);// 令打开APP首次展示的是首页，即subpage[0],若不加判断，则展示的是subpage[4]if(i > 0){sub.hide();}}
 });
 

第三步：点击事件处理

// 第三步：事件处理。点击底部按钮，其实就是点击不同的超链接元素，切换不同的元素显示和隐藏。
 // 首先，给超链接元素绑定事件，针对不同的href，显示/隐藏不同的webview
 mui(".myfooter").on("tap","a",function(){// alert(this.href);var currentActiveTab = this.getAttribute("href");if(currentActiveTab == mui(".mui-active")[0].getAttribute("href")){return; };plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏plus.webview.show(currentActiveTab); // 显示
 });
 

相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值（打开新的子页面）
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包，一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车