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

全局配置和页面配置

通过globalStyle进行全局设置

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

(vscode用Vue-cli创建的它的pages在src目录下)

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

"globalStyle": {
		"navigationBarTextStyle": "white",//导航栏标题颜色及状态栏前景颜色
		"navigationBarTitleText": "我的应用",//导航栏标题文字内容(全局)
		"navigationBarBackgroundColor": "#EEDC82",//导航栏背景色
		"backgroundColor": "#87CEFF",//窗口背景色(页面下拉加载的背景色)
    	"enablePullDownRefresh":true,//是否开启下拉刷新
    	"backgroundTextStyle":"light"//加载的颜色变为白色，还有一种是黑色
	},

小程序还是默认的uni-app标题，这是为什么？

globalStyle里面属于的是全局配置文件

而pages这里面是属于页面级的配置文件

页面级的会把全局的给覆盖掉

---

onReachButtomDistance(以后的程序会是以列表的形式呈现，距离底部到达多少会触发下一页，就会用到这个配置项)

创建新页面和页面配置

创建一个新的message页面

右键pages新建message目录，在message目录下创建.vue文件

<template>
    <div>
    </div>
</template>

<script>
    export default {
    }
</script>

<style scoped>
</style>

怎么去写.vue文件可以查看这个(实时在更新)还有就是查看小程序的学习资料

怎么去给我们的message添加一个独有的样式:

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

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

"pages": [
		{
			"path": "pages/index/index"
		},
		{
			"path": "pages/message/message",
		},
		{
			"path": "pages/player/player"
		}
	],

与globalStyle基本上是一样的

{
			"path": "pages/message/message",
			"style":{
				"navigationBarTitleText":"信息",
                "navigationBarBackgroundColor": "#98F5FF"
			}
		},

页面的样式会把全局会给覆盖掉。

我们在页面上还可以配置一个东西:

属性	类型	默认值	描述	平台差异说明
h5	Object		设置编译到H5平台特定样式，配置项参考H5	H5
mp-alipay	Object		设置编译到 mp-alipay 平台的特定样式，配置项参考 MP-ALIPAY	支付宝小程序
mp-weixin	Object		设置编译到 mp-weixin 平台的特定样式	微信小程序
mp-baidu	Object		设置编译到 mp-baidu 平台的特定样式	百度小程序
mp-toutiao	Object		设置编译到 mp-toutiao 平台的特定样式	字节跳动小程序
mp-qq	Object		设置编译到 mp-qq 平台的特定样式	QQ小程序

h5

配置编译到 H5 平台时的特定样式

属性	类型	描述
titleNView	Object	导航栏
pullToRefresh	Object	下拉刷新

下拉刷新

h5 平台下拉刷新动画，只有 circle 类型。

属性	类型	默认值	描述
color	String	#2BD009	颜色值格式为"#RRGGBB"
offset	String	0px	下拉刷新控件的起始位置。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。

mp-alipay

配置编译到 MP-ALIPAY 平台时的特定样式

属性	类型	默认值	描述
allowsBounceVertical	String	YES	是否允许向下拉拽。支持 YES / NO
titleImage	String		导航栏图片地址（替换当前文字标题），内必须使用https的图片链接地址
transparentTitle	String	none	导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明
titlePenetrate	String	NO	导航栏点击穿透
showTitleLoading	String	NO	是否进入时显示导航栏的 loading。支持 YES / NO
backgroundImageUrl	String		下拉露出显示的背景图链接
backgroundImageColor	HexColor		下拉露出显示的背景图底色
gestureBack	String	NO	iOS 用，是否支持手势返回。支持 YES / NO
enableScrollBar	String	YES	Android 用，是否显示 WebView 滚动条。支持 YES / NO

取消顶部标题

想取消局部的顶部标题，就在这个页面配置加一个navigationStyle里面的值是custom,比如:

属性	类型	默认值	描述	平台差异说明
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle":"custom"
			}
		},
]

如果是全局就设置在全局globalStyle里