uni-app 配置项目底部选项卡 tabbr配置

2021/4/8 10:10:09

本文主要是介绍uni-app 配置项目底部选项卡 tabbr配置,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

链图标官网: iconfont..
pages.json pages是我们注册文件或一些页面窗口表现的设置。
globalstyle:页面窗口的所有配置。
在这里插入图片描述

配置其他平台特有样式:

               "app-plus":{},
				"mp-weixin":{},
				"h5":{}

testdemo:三个底座,三个页面

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"app-plus":{},
				"mp-weixin":{},
				"h5":{}
			}
		}
	    ,{
            "path" : "pages/about/about",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
		},
		"tabBar":{
			"color":"#666",
			"selectedColor":"#007AFF",
			"borderStyle":"black",
		    "list":[
				{
					"pagePath":"pages/index/index",
					"text":"首页",
					// 本地图片 大小81*81 大小40kb
					"iconPath":"static/home.png",
					"selectedIconPath":"static/home-active.png"
				},
				{
					"pagePath":"pages/about/about",
					"text":"关于",
					// 本地图片 大小81*81 大小40kb
					"iconPath":"static/about.png",
					"selectedIconPath":"static/about-active.png"
				},
				{
					"pagePath":"pages/my/my",
					"text":"我的",
					// 本地图片 大小81*81 大小40kb
					"iconPath":"static/my.png",
					"selectedIconPath":"static/my-active.png"
				}
			]
		}
}

在这里插入图片描述

在这里插入图片描述



这篇关于uni-app 配置项目底部选项卡 tabbr配置的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程