uni-app全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面生命周期
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
创建新的message页面

右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

<template>
	<view>
		这是信息页面
	</view>
</template>

<script>
</script>

<style>
</style>
通过pages来配置页面
属性 类型 默认值 描述
path String 配置页面路径
style Object 配置页面窗口表现,配置项参考 pageStyle

pages数组数组中第一项表示应用启动页

"pages": [ 、
		{
			"path":"pages/message/message"
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	]

通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path":"pages/message/message",
			"style": {
				"navigationBarBackgroundColor": "#007AFF",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": true,
				"disableScroll": true,
				"h5": {
					"pullToRefresh": {
						"color": "#007AFF"
					}
				}
			}
		}
	]
配置tabbar

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

Tips

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性说明:

属性 类型 必填 默认值 描述 平台差异说明
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar 上边框的颜色,仅支持 black/white App 2.3.4+ 支持其他颜色值
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top top 值仅微信小程序支持

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

案例代码:

"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text": "信息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
				"selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text": "我们",
				"pagePath":"pages/contact/contact",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}
condition启动模式配置

启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

属性说明:

属性 类型 是否必填 描述
current Number 当前激活的模式,list节点的索引值
list Array 启动模式列表

list说明:

属性 类型 是否必填 描述
name String 启动模式名称
path String 启动页面路径
query String 启动参数,可在页面的 onLoad 函数里获得
上一篇:关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题


下一篇:painter绘制卡通风格的音乐情侣