【项目】UniApp实战多端企业网盘全栈开发 6 配置tabbar底部导航

比眉伴天荒 2024-03-22 14:54 51阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  6 配置tabbar底部导航

![在这里插入图片描述][b10934dc1bf546129318573498cd9161.png_pic_center]

##### 6 配置tabbar底部导航 #####

图标依然来自阿里iconfont

![在这里插入图片描述][37a2c32c7a01480c9c8dbb6e82b7313b.png_pic_center]

> 注意自己下载时，设置80个像素
> 
> ![在这里插入图片描述][bcee367dd7c54421a88e4ee20be8dfe8.png_pic_center]

创建两个新页面

![在这里插入图片描述][375d8a28df9a410394907fd6f182f770.png_pic_center]

![在这里插入图片描述][3317b87f5d0f4fd8a6a70e08b6708f14.png_pic_center]

![在这里插入图片描述][beef537ddbbf4456a1ff05c5e97b108b.png_pic_center]

![在这里插入图片描述][81742203114d419abc4187d714f3d748.png_pic_center]

直接编辑`pages.json` 文件

{
        
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
        
    			"path": "pages/index/index",
    			"style": {
        
    				"navigationBarTitleText": "首页"
    			}
    		}
    	    ,{
        
                "path" : "pages/list/list",
                "style" :                                                                                    
                {
        
                    "navigationBarTitleText": "传输列表",
                    "enablePullDownRefresh": false
                }
                
            }
            ,{
        
                "path" : "pages/my/my",
                "style" :                                                                                    
                {
        
                    "navigationBarTitleText": "我的个人中心",
                    "enablePullDownRefresh": false
                }
                
            }
        ],
    	"globalStyle": {
        
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	},
    	"tabBar": {
        
    		"backgroundColor": "#FFFFFF",
    		"borderStyle": "black",
    		"color": "#BDBDBD",
    		"selectedColor": "#009CFF",
    		"list": [{
        
    			"iconPath": "static/tabbar/index.png",
    			"selectedIconPath": "static/tabbar/index-selected.png",
    			"pagePath": "pages/index/index",
    			"text": "首页"
    		}, {
        
    			"iconPath": "static/tabbar/list.png",
    			"selectedIconPath": "static/tabbar/list-selected.png",
    			"pagePath": "pages/list/list",
    			"text": "传输"
    		}, {
        
    			"iconPath": "static/tabbar/my.png",
    			"selectedIconPath": "static/tabbar/my-selected.png",
    			"pagePath": "pages/my/my",
    			"text": "我的"
    		}]
    	}
    }

运行效果

![在这里插入图片描述][532546e35323471c8ca65069a291bf76.png_pic_center]

没问题。

[b10934dc1bf546129318573498cd9161.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/240e12c57b264867a4a9c7f2a45e37ce.png
[37a2c32c7a01480c9c8dbb6e82b7313b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7355dbdb3b7c4640a430ac59b8133ce4.png
[bcee367dd7c54421a88e4ee20be8dfe8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3e6b12dd93854cb7887aaca7e57682c4.png
[375d8a28df9a410394907fd6f182f770.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e5c7915e90374448919fc278a9af2902.png
[3317b87f5d0f4fd8a6a70e08b6708f14.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/42c817661dbd475eb5e0d2e977cae271.png
[beef537ddbbf4456a1ff05c5e97b108b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8c9fcec130db4b51afa659d196363a8d.png
[81742203114d419abc4187d714f3d748.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ac71cd2f08da4ecca24625e9958281f0.png
[532546e35323471c8ca65069a291bf76.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ac90a25eb1a2499e8a796eef5eac2b89.png