uni-app底部导航栏tabBar的显示和使用步骤

ゞ浴缸里的玫瑰 2023-06-19 11:28 36阅读 0赞

### 一，看官网，了解tabBar ###

# [tabBar][] #

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

**Tips**

*  当设置 position 为 top 时，将不会显示 icon
 *  tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
 *  tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
 *  tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
 *  顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

### 二，在page.js文件里面配置 ###

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	    ,{
                "path" : "pages/show/show",
                "style" : {
    				"navigationBarTitleText": "show"
    			}
            }
            ,{
                "path" : "pages/component/component",
                "style" : {
    				"navigationBarTitleText": "component"
    			}
            }
        ],
    	"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	},
    	"tabBar": {
    	    "color": "#F0AD4E",
    	    "selectedColor": "#3cc51f",
    	    "borderStyle": "black",
    	    "backgroundColor": "#F8F8F8",
    	    "list": [{
    	        "pagePath": "pages/index/index",
    	        "iconPath": "static/logo.png",
    	        "selectedIconPath": "static/logo.png",
    	        "text": "首页"
    	    },{
    	        "pagePath": "pages/component/component",
    	        "iconPath": "static/logo.png",
    	        "selectedIconPath": "static/logo.png",
    	        "text": "组件"
    	    }, {
    	        "pagePath": "pages/show/show",
    	      "iconPath": "static/logo.png",
    	      "selectedIconPath": "static/logo.png",
    	        "text": "展示"
    	    }]
    	}
    
    	    
    }

刚开始不知道为什么我在"tabBar"里面配置两个页面的时候一直不显示，配置三个页面就成功了，不知道你们有没有遇到这个问题

好了，配置成功，效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

[tabBar]: https://uniapp.dcloud.io/collocation/pages?id=tabbar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191206161821616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70