uniapp pages.json 简单应用

最新推荐文章于 2024-07-30 13:54:41 发布

新生代农民工-小王八

最新推荐文章于 2024-07-30 13:54:41 发布

阅读量2.4k

点赞数

分类专栏： uniapp 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Little___Turtle/article/details/126197612

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

pages.json 配置页面样式

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

pages

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

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考下方 pageStyle

Tips：

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

代码演示 style更多样式

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// 导航标题内容
				"navigationBarTitleText": "首页",
				//导航背景颜色
				"navigationBarBackgroundColor": "#ff5566",
				//导航标题颜色 仅支持白 黑
				"navigationBarTextStyle": "white",
				//是否开启下拉刷新
				"enablePullDownRefresh": true
			}
		}
	    ,{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "enablePullDownRefresh": false
            }
            
        }
    ]

运行效果

globalStyle

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

全局通用如果局部有样式按局部显示

代码演示更多样式说明

"globalStyle": {
		// 导航栏标题颜色
		"navigationBarTextStyle": "black",
		//导航栏标题内容
		"navigationBarTitleText": "default",
		//导航栏背景颜色
		"navigationBarBackgroundColor": "#F8F8F8",
		//导航栏背景颜色
		"backgroundColor": "#F8F8F8"
	},

运行效果

tabBar

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

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

代码演示官网详细介绍 图片图标下载阿里图库

"tabBar": {
		//背景颜色
		"backgroundColor": "#F8F8F8",
		//tab文字颜色
		"color": "#d8d8d8",
		//tab选中文字颜色
		"selectedColor": "#444",
		"list": [
			{
				"text": "首页",
				//页面路径 该路径与pages一致 要不然展示不出来
				"pagePath": "pages/index/index",
				//默认展示图片
				"iconPath": "./static/icon/index.png",
				//选中展示图片
				"selectedIconPath": "./static/icon/indexSel.png"
			},
			{
				"text": "个人",
				"pagePath": "pages/homepage/homepage",
				"iconPath": "./static/icon/person.png",
				"selectedIconPath": "./static/icon/personSel.png"
			}
		]
	},