mui tab bar 顶部+底部

底部选项卡+div模式

        通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中， 若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；

核心代码：

	
		
		首页
	
	
		9
		消息
	
	
		
		通讯录
	
	
		
		设置
	

	

	
这是div模式选项卡中的第1个子页面.
	
何谓div模式的选项卡？
		其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；
	

		这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，
		若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；
		因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；
	

底部选项卡+二级菜单

        操作方式类似与上一种，只是在底部选项卡的基础上延伸出二级菜单

核心代码：

	产品
	方案
	新闻


	

		
这是包含二级菜单的底部选项卡示例，点击底部菜单，会展开显示对应的二级菜单。
	



	

		

			
iOS
			
			
Android
			
			
HTML5
			
		
	

       

        综合上述两种模式，如果将内容全部作为div放置于同一个webview中，如果内容较多会造成页面卡顿，甚至卡死崩溃。综合PullRefresh的方法，根据实际内容数据可以接入多个webview分别展示内容区域，而将tab bar ,nav bar ,off canvas 作为外部container的容器部件。

顶部选项卡+div模式

核心代码：

	待办公文（8）
	已办公文
	全部公文

	

		

			

				

					第一个选项卡子项-1
				
				

					第一个选项卡子项-2
				
				

					第一个选项卡子项-3
				
								
			
		
	

顶部选项卡+可左右拖动(div)

核心代码：

	

		
		        待办公文
		
		
			已办公文
		
		
			全部公文
		
	
        
        

        
        

		

			

				

				       

						

							第一个选项卡子项-1
						
						

							第一个选项卡子项-2
						
						

							第一个选项卡子项-3
						
									
					
				  
			  
		  
	
	

左侧选项卡+div模式

核心代码：

项目源码在HBuilder中的mui官方示例demo中都有。