uniapp框架配置项pages.json

uniapp框架配置项pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

globalStyle 全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。下面配置项默认应用于每个页面。
注意：更改 pages.json 里面的配置信息后，最好是重新运行项目，并且手机上的app也要退出重新打开；不然有时候不生效。

状态栏和导航栏

1. navigationBarBackgroundColor,默认颜色#F7F7F7，导航栏北京颜色，同状态栏背景色。

"globalStyle": {
		"navigationBarBackgroundColor": "#007aff"
	},

2. navigationBarTitleText，导航栏标题文字内容。

"globalStyle": {
		"navigationBarBackgroundColor": "#007aff",
		"navigationBarTitleText": "APP"
	},

3. navigationBarTextStyle导航栏标题颜色及状态栏前景颜色,仅支持 black/white

"navigationBarTextStyle": "white"

4. titleImage，导航栏图片地址(替换导航栏标题文字)，支付宝小程序内必须使用https的图片链接地址。globalStyle 中设置的 titleImage 也会覆盖掉 pages -> style 内的设置文字标题。

		"titleImage": "/static/logo.png"

5. transparentTitle导航栏整体透明（ always 一直透明 / auto 滑动自适应 / none 不透明）。
测试：在index.vue中来个v-for循环内容超过屏高。

		"transparentTitle": "always"

6. navigationStyle导航栏样式，仅支持 default/custom, custom不显示原生导航栏并且状态栏不占位。

上拉和下拉刷新配置项与对应生命周期函数

bounce 上拉下拉回弹

backgroundColor下拉上拉回弹的背景色。

	"backgroundColor": "#00FFFF"

backgroundColorTop下拉顶部窗口的背景色（bounce回弹区域）,backgroundColorBottom,上拉底部窗口的背景色（bounce回弹
区域）

		"backgroundColorTop": "#ffff00",
		"backgroundColorBottom": "#ff00ff"

下拉回弹

上拉回弹

下拉刷新和上拉触底

主要用于下拉刷新数据，上拉触底查询下一页数据。一般针对需要使用的页面进行配置，而不会全局配置。
enablePullDownRefresh,是否开启下拉刷新。
backgroundTextStyle,开启下拉刷新后，下拉 loading 的样式，仅支持 dark / light。
onReachBottomDistance,页面上拉触底事件触发时距页面底部距离，单位只支持px。

下拉刷新触发页面生命周期onPullDownRefresh的方法，如下：

下拉刷新触发结果如下：

上拉触到底部触发方法：onReachBottom

上拉触底：

pages 页面配置

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值有path,style：

属性	描述
path	配置页面路径
style	配置页面窗口表现

pages节点的第一项为应用入口页即首页，应用中新增减少页面都需要对pages数组进行修改，文件名不需要写后缀，框架会自动寻找路径下的页面资源。

代码示例：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/category/index",
			"style": {
				"navigationBarBackgroundColor": "#4cd964",
				"navigationBarTitleText": "分类"	,
				"navigationBarTextStyle": "white",
				"navigationBarShadow": { // 导航栏阴影
					"colorType": "red" 
				},
				// "disableScroll": true // 设置为true则页面整体不能上下滚动
				"app-plus": { // 主要针对app端配置
					"background": "#007AFF",
					"scrollIndicator": "none", //不显示滚动条
					"titleNView": { // 自定义导航栏
						"backgroundColor": "#007AFF", //如果上面设置了navigationBarBackgroundColor,则以此为准
						"buttons": [
							{
								"type": "share" //左上角分享按钮
							},
							{
								"fontSrc": "/static/icon/iconfont.ttf",
								"text": "\ue689",
								"fontSize": "23",
								"float": "left"
							}
						],
						"searchInput": { // 搜索框
							"align": "center", //搜索框居中,
							"autoFocus": true, //是否获取焦点
							"backgroundColor": "#F0F1F2", // 搜索框背景色
							"borderRadius": "30rpx", //搜索框圆角
							"placeholder": "搜索内容", //搜索提示
							"disabled": true,
							"placeholderColor": "#F79c9D" //提示文字
						}
					}
				}
			}
		},
		{
			"path": "pages/index/index",
			"style": {
			}
		}
	],
	// 全局配置，
	"globalStyle": {
		"navigationBarBackgroundColor": "#007aff",
		"navigationBarTitleText": "APP",
		// "titleImage": "/static/logo.png",
		"transparentTitle": "none",
		"backgroundColorTop": "#0000FF",
		"backgroundColorBottom": "#ff00ff",
		"enablePullDownRefresh": true, // 是否开启下拉刷新，默认false
		"backgroundTextStyle": "light",
		"onReachBottomDistance": 50	
	},
	"uniIdRouter": {}
}

效果：

底部导航tabBar配置

创建tabbar对应的页面

文件中加入icon图标

配置page代码：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			}
		},
		{
			"path": "pages/category/index",
			"style": {
				"navigationBarBackgroundColor": "#4cd964",
				"navigationBarTitleText": "分类"	,
				"navigationBarTextStyle": "white",
				"navigationBarShadow": { // 导航栏阴影
					"colorType": "red" 
				},
				// "disableScroll": true // 设置为true则页面整体不能上下滚动
				"app-plus": { // 主要针对app端配置
					"background": "#007AFF",
					"scrollIndicator": "none", //不显示滚	动条
					"titleNView": { // 自定义导航栏
						"backgroundColor": "#007AFF", //如果上面设置了navigationBarBackgroundColor,则以此为准
						"buttons": [
							{
								"type": "share" //左上角分享按钮
							},
							{
								"fontSrc": "/static/icon/iconfont.ttf",
								"text": "\ue689",
								"fontSize": "23",
								"float": "left"
							}
						],
						"searchInput": { // 搜索框
							"align": "center", //搜索框居中,
							"autoFocus": true, //是否获取焦点
							"backgroundColor": "#F0F1F2", // 搜索框背景色
							"borderRadius": "30rpx", //搜索框圆角
							"placeholder": "搜索内容", //搜索提示
							"disabled": true,
							"placeholderColor": "#F79c9D" //提示文字
						}
					}
				}
			}
		},
		{
			"path" : "pages/course/course",
			"style" : 
			{
				"navigationBarTitleText" : "阅读"
			}
		},
		{
			"path" : "pages/question/question",
			"style" : 
			{
				"navigationBarTitleText" : "问答"
			}
		},
		{
			"path" : "pages/my/my",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	"tabBar": {
		"color": "#b0abb3", // tab上的文字颜色
		"selectedColor": "#345dc2", // 选中的字体颜色
		"backgroundColor": "#f8f8f8", //tab背景色
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tab/index.png",
				"selectedIconPath": "static/tab/index-active.png"
			},
			{
				"pagePath": "pages/category/index",
				"text": "分类",
				"iconPath": "static/tab/category.png",
				"selectedIconPath": "static/tab/category-active.png"
			},
			{
				"pagePath": "pages/course/course",
				"text": "阅读",
				"iconPath": "static/tab/article.png",
				"selectedIconPath": "static/tab/article-active.png"
			},
			{
				"pagePath": "pages/question/question",
				"text": "问答",
				"iconPath": "static/tab/question.png",
				"selectedIconPath": "static/tab/question-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tab/my.png",
				"selectedIconPath": "static/tab/my-active.png"
			}
		]
	},
	// 全局配置，
	"globalStyle": {
		"navigationBarBackgroundColor": "#007aff",
		"navigationBarTitleText": "APP",
		// "titleImage": "/static/logo.png",
		"transparentTitle": "none",
		"backgroundColorTop": "#0000FF",
		"backgroundColorBottom": "#ff00ff",
		"enablePullDownRefresh": true, // 是否开启下拉刷新，默认false
		"backgroundTextStyle": "light",
		"onReachBottomDistance": 50	
	},
	"uniIdRouter": {}
}

效果：

完结~