uni-app底部导航tabBar的使用

系统管理员 2022-03-02 01:28 226阅读 0赞

uni-app的艰难学习之路

## step1—学习 ##

官网说明：官网>配置>page.json>tabBar  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE0Mzk3NQ_size_16_color_FFFFFF_t_70]

## step2—使用 ##

1、在pages中新建文件  
![在这里插入图片描述][20190319135224282.png]  
2、在pages.json文件里写配置代码

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    			{
    				"path": "pages/index/index",
    				"style": {
    					"navigationBarTitleText": "天天好物"
    				}
    			},
          {
            "path" : "pages/search/search",
            "style" : {
              "navigationBarTitleText": "搜索"
            }
          },
          {
            "path" : "pages/rankingList/rankingList",
            "style" : {
              "navigationBarTitleText": "排行榜"
            }
          },
          {
            "path" : "pages/dongdongqiang/dongdongqiang",
            "style" : {
    				  "navigationBarTitleText": "咚咚抢"
    			  }
          },
          {
            "path" : "pages/me/me",
            "style" : {
    				  "navigationBarTitleText": "我的"
    			  } 
          }
        ],
    "tabBar": {
    		"color":"#8a8a8a",
    		"selectedColor":"#d4237a",
    		"borderStyle":"black",
    		"backgroundColor":"#ffffff",
    		"list": [
    			{
    				"pagePath":"pages/index/index",
    				"text":"首页",
    				"iconPath":"static/home_normal.png",
    				"selectedIconPath":"static/home.png"
    			},
    			{
    				"pagePath":"pages/search/search",
    				"text":"搜索",
    				"iconPath":"static/search_normal.png",
    				"selectedIconPath":"static/search.png"
    			},
    			{
    				"pagePath":"pages/rankingList/rankingList",
    				"text":"排行榜",
    				"iconPath":"static/paihangbang_normal.png",
    				"selectedIconPath":"static/paihangbang.png"
    			},
    			{
    				"pagePath":"pages/dongdongqiang/dongdongqiang",
    				"text":"咚咚抢",
    				"iconPath":"static/alert_normal.png",
    				"selectedIconPath":"static/alert.png"
    			},
    			{
    				"pagePath":"pages/me/me",
    				"text":"我的",
    				"iconPath":"static/me_normal.png",
    				"selectedIconPath":"static/me.png"
    			}
    		]	
    	 }
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE0Mzk3NQ_size_16_color_FFFFFF_t_70]: /images/20220302/255cdb8b6e524e789e4d143c72e78885.png
[20190319135224282.png]: /images/20220302/562d84a4e32e47a4bbc23688c5f31d0c.png