uni-app知识点整理（2）- 全局配置和页面配置、tabbar、condition

目录

一、globalStyle全局外观配置

1.1 简介

1.2 简单案例练习

二、页面配置

2.1 简单案例练习

三、配置tabbar

3.1 简介

3.2 简单案例练习

四、condition

4.1 简介

4.2 简单案例练习

---

一、globalStyle全局外观配置

1.1 简介

通过 globalStyle 进行全局配置

官方文档：globalstyle

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

常用的globalStyle全局配置属性

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

1.2 简单案例练习

• 导航栏标题颜色修改为：white
• 导航栏标题修改：测试案例
• 导航栏背景色修改：#7bbfea
• 开启下拉刷新
• 下拉loading样式修改：light
• 下拉显示出来的窗口的背景色修改：#ffaa00

// pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white", // 导航栏标题颜色修改为：white
		"navigationBarTitleText": "测试案例", // 导航栏标题修改
		"navigationBarBackgroundColor": "#7bbfea", // 导航栏背景色修改
		"backgroundColor": "#ffaa00", // 下拉显示出来的窗口的背景色修改
		"backgroundTextStyle":"light", // 下拉loading样式修改
		"enablePullDownRefresh":true // 是否开启下拉刷新
		
	}
}

二、页面配置

uni-app官方文档 - pages

2.1 简单案例练习

创建一个message页面，代替原本index作为默认页面，修改单独修改 H5 样式

右键pages文件夹，选择创建创建页面，填写页面名称以及模板选择即可，同时会Hbuilder X会自动在pages.json中注册

message.vue

<template>
	<view>
		message页面
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

pages.json

• 将message相关代码移动到index页面前即可代替为默认页面

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/message/message",
		    "style" :                                                                                    
		    {
				"navigationBarBackgroundColor": "#ff5500",
		        "h5": {	// H5特有配置
		        	"pullToRefresh": {	// 下拉刷新设置
		        		"color": "#ffaa00"
		        	},
					"titleNView": {	// 导航栏设置
						"titleText": "message页面" 
					}
		        }
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white", // 导航栏标题颜色修改为：white
		"navigationBarTitleText": "测试案例", // 导航栏标题修改
		"navigationBarBackgroundColor": "#7bbfea", // 导航栏背景色修改
		"backgroundColor": "#ffaa00", // 下拉显示出来的窗口的背景色修改
		"backgroundTextStyle":"light", // 下拉loading样式修改
		"enablePullDownRefresh":true // 是否开启下拉刷新
		
	}
}

注意：页面中配置项会覆盖 globalStyle 中相同的配置项

三、配置tabbar

3.1 简介

uni-app官方文档 - tabbar

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

注意：

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

uni-app官方文档 - tabbar属性说明

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white	App 2.3.4+ 支持其他颜色值、H5 3.0.0+
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明 (opens new window)）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持
fontSize	String	否	10px	文字默认大小	App 2.3.4+、H5 3.0.0+
iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+、H5 3.0.0+
spacing	String	否	3px	图标和文字的间距	App 2.3.4+、H5 3.0.0+
height	String	否	50px	tabBar 默认高度	App 2.3.4+、H5 3.0.0+
midButton	Object	否		中间按钮 仅在 list 项为偶数时有效	App 2.3.4+、H5 3.0.0+

uni-app官方文档 - list属性值

属性	类型	必填	说明	平台差异
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
visible	Boolean	否	该项是否显示，默认显示	App (3.2.10+)、H5 (3.2.10)+
iconfont	Object	否	字体图标，优先级高于 iconPath	App（3.4.4+）

3.2 简单案例练习

• 新创建一个user页面
• 下载tabbar图标
• 配置tabbar

 

 图标下载 - 阿里巴巴矢量图标库

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/message/message",
		    "style" :                                                                                    
		    {
				"navigationBarBackgroundColor": "#ff5500",
		        "h5": {	// H5特有配置
		        	"pullToRefresh": {	// 下拉刷新设置
		        		"color": "#ffaa00"
		        	},
					"titleNView": {	// 导航栏设置
						"titleText": "message页面" 
					}
		        }
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "user页面",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white", // 导航栏标题颜色修改为：white
		"navigationBarTitleText": "测试案例", // 导航栏标题修改
		"navigationBarBackgroundColor": "#7bbfea", // 导航栏背景色修改
		"backgroundColor": "#ffaa00", // 下拉显示出来的窗口的背景色修改
		"backgroundTextStyle":"light", // 下拉loading样式修改
		"enablePullDownRefresh":true // 是否开启下拉刷新
		
	},
	// 配置tabbar
	"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "./static/tabs/home.png",
				"selectedIconPath": "./static/tabs/home-tap.png"
			},
			{
				"text": "信息",
				"pagePath": "pages/message/message",
				"iconPath": "./static/tabs/message.png",
				"selectedIconPath": "./static/tabs/message-tap.png"
			},
			{
				"text": "用户中心",
				"pagePath": "pages/user/user",
				"iconPath": "./static/tabs/user.png",
				"selectedIconPath": "./static/tabs/user-tap.png"
			}
		]
	}
}

四、condition

4.1 简介

uni-app官方文档 - condition

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

condition属性说明

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

list说明

属性	类型	是否必填	描述
name	String	是	启动模式名称
path	String	是	启动页面路径
query	String	否	启动参数，可在页面的 onLoad 函数里获得

注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式

4.2 简单案例练习

• 添加一个detail.vue页面
• pages.json配置condition模拟跳转

创建一个detail.vue页面

<template>
	<view>
		Detail详情页
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

pages.json内添加以下代码段

	"condition": { //模式配置，仅开发期间生效
		"current": 0,  //当前激活的模式（list 的索引项）
		"list": [
			{
				"name": "详情页", //模式名称
				"path": "pages/detail/detail", //启动页面，必选
				"query": "id=97" //启动参数，在页面的onLoad函数里面得到。
			}
		]
	}

运行到微信小程序开发工具，由图示可看出微信小程序开发工具添加新的编译模式，选择跳转后可以看到传递的参数