MUI-底栏实现-页面切换

╰+攻爆jí腚メ 2023-09-29 09:42 135阅读 0赞

MUI-底栏实现-页面切换：通过“窗口管理”和“事件”来实现页面切换的效果。  
**界面展示：**  
![在这里插入图片描述][efd009098b574205b5164fe6cd9a8895.png]  
**第一步：底部选项卡制作**

**第二步：窗口对象设置**

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

[efd009098b574205b5164fe6cd9a8895.png]: https://img-blog.csdnimg.cn/efd009098b574205b5164fe6cd9a8895.png
[MUI]: https://blog.csdn.net/blbyu/article/details/124073884
[MUI 1]: https://blog.csdn.net/blbyu/article/details/124073728
[MUI 2]: https://blog.csdn.net/blbyu/article/details/124073670
[HbuilderX_MUI_App]: https://blog.csdn.net/blbyu/article/details/124029950
[H5_ Webview]: https://blog.csdn.net/blbyu/article/details/124087264
[MUI-_-]: https://blog.csdn.net/blbyu/article/details/124089783
[MUI-_- 1]: https://blog.csdn.net/blbyu/article/details/124100509
[MUI-_- 2]: https://blog.csdn.net/blbyu/article/details/124104471
[MUI-]: https://blog.csdn.net/blbyu/article/details/124114095
[MUI-_2]: https://blog.csdn.net/blbyu/article/details/124122849
[MUI-_-UI]: https://blog.csdn.net/blbyu/article/details/124118088
[MUI- 1]: https://blog.csdn.net/blbyu/article/details/124292196
[MUI- 2]: https://blog.csdn.net/blbyu/article/details/124358512
[MUI- 3]: https://blog.csdn.net/blbyu/article/details/124358520
[MUI- 4]: https://blog.csdn.net/blbyu/article/details/124358762
[HTML5_API-]: https://blog.csdn.net/blbyu/article/details/124395810
[HTML5_API- 1]: https://blog.csdn.net/blbyu/article/details/124395849
[HTML5_API- 2]: https://blog.csdn.net/blbyu/article/details/124395903
[MUI- 5]: https://blog.csdn.net/blbyu/article/details/124395907
[HTML5_API- 3]: https://blog.csdn.net/blbyu/article/details/124395916
[HTML5_API- 4]: https://blog.csdn.net/blbyu/article/details/124398657
[Hbuilder]: https://blog.csdn.net/blbyu/article/details/124400424
[Hbuilder-]: https://blog.csdn.net/blbyu/article/details/124400990
[APP]: https://blog.csdn.net/blbyu/article/details/124074019
[IOS_APP_input]: https://blog.csdn.net/blbyu/article/details/124369536
[MUI- 6]: https://blog.csdn.net/blbyu/article/details/124417308