uni-app入门篇（全局样式配置，页面创建，tabbar的配置）

uni-app入门篇 全局样式配置

page.json

• 这是关于 uni项目的页面的全局配置文件，里面有着全局样式等配置
• 全局样式配置文件官网：全局样式globalStyle
• 全局样式是在 page.json 文件之中的 globalStyle属性中设置

设置 uni 导航栏背景颜色

• navigationBarBackgroundColor
• page.json - globalStyle

{
    
    
	"globalStyle": {
    
    
		"navigationBarBackgroundColor": "#7FFF00",
	}
}

导航栏标题颜色

• navigationBarTextStyle
• 导航栏标题颜色及状态栏前景颜色，仅支持 black/white

	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
	}

navigationBarTitleText

• 导航栏标题文字内容

	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "小渣亮",
	}

• 注意点：就是有可能修改后，不出现对应的效果，这是因为以下的配置影响
  • 在页面之中的 配置 navigationBarTitleText 影响，去掉即可

{
    
    
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/index/index"
			// "style": { 
			// 	"navigationBarTitleText": "uni-app"
			// }
		}
	],
	"globalStyle": {
    
    
		"navigationBarTitleText": "小渣亮",
	}
}

• 最终效果
  

开启下拉刷新 配置 下拉刷新的背景颜色

• enablePullDownRefresh Boolean
  • 是否开启下拉刷新，详见页面生命周期。

	"globalStyle": {
    
    
		"backgroundColor": "#000000",
		"enablePullDownRefresh": true
	}

• 效果 微信小程序看到的

uni-app入门篇 页面创建

page.json 配置文件之中

• 官网：官网

新建一个 msg 页面路径

• 需要在page文件之中，新增 pages / msg / msg.vue
• 需要在 page.json 文件之中，配置路径
  • { "path": "pages/msg/msg" }

{
	"pages": [ 
		{
			"path": "pages/msg/msg"
		},
		{
			"path": "pages/index/index"
		}
    ],
}

对当前新增的页面 修改单独的样式

• { "path": "pages/msg/msg", "style":{} },
• 就是在 style里面书写的
• style样式

		{
    
    
			"path": "pages/msg/msg",
			"style":{
    
    
					"navigationBarTitleText":"我是msg",
					"navigationBarBackgroundColor": "#007aff"
			}
		},

设置单独的样式 h5等

• 修改h5相关样式
• 配置一个h5的下拉刷新 字体颜色 （h5才生效的）

		{
    
    
			"path": "pages/msg/msg",
			"style":{
    
    
					"h5":{
    
    
						"pullToRefresh":{
    
    
							"color":"#DD524D"
						}
					}
			}
		},

• 效果
  

uni之 tabbar的配置

page.json统一配置文件之中配置

• tabbar官网

实现一个tabBar

{
    
    
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/msg/msg",
			"style":{
    
    
					"navigationBarTitleText":"我是msg",
					"navigationBarBackgroundColor": "#007aff",
					"h5":{
    
    
						"pullToRefresh":{
    
    
							"color":"#DD524D"
						}
					}
			}
		},
		{
    
    
			"path": "pages/index/index"

		},{
    
    
        "path" : "pages/about/about",	
				"style":{
    
    
					"navigationBarTitleText":"我是about",
					"navigationBarBackgroundColor": "#007afe"
			}
        }
    ],
	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "小渣亮",
		"navigationBarBackgroundColor": "#7FFF00",
		"backgroundColor": "#000000",
		"enablePullDownRefresh": true,
		"backgroundTextStyle": "dark"
	},
	"tabBar":{
    
    
		"list":[
			{
    
    
				"text":"首页",
				"pagePath":"pages/index/index"
			},
			{
    
    
				"text":"关于",
				"pagePath":"pages/about/about"
			},
			{
    
    
				"text":"消息",
				"pagePath":"pages/msg/msg"
			}
		]
	}
}

• 效果
  

tabBar其他的属性

• “color”:“#FFFFFF”, 默认字体
• “selectedColor”:“#ff0001”, 选中字体
• “backgroundColor”:“blue”, 背景颜色