全局配置

发布时间：2023-04-24 12:32:30 所属栏目：教程来源：

导读：全局配置作用于整个项目，也就是对项目中所有的页面都起作用，在项目根目录下面的 pages.json 文件中，找到globalStyle配置项，在这个配置项中进行项目的全局配置。

实例：

"globalStyle": {
"navigationBa

全局配置作用于整个项目，也就是对项目中所有的页面都起作用，在项目根目录下面的 pages.json 文件中，找到globalStyle配置项，在这个配置项中进行项目的全局配置。

实例：

"globalStyle": {
"navigationBarTextStyle": "black", //导航栏标题颜色
"navigationBarTitleText": "网", //导航栏标题文字
"navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色
"backgroundColor": "#F8F8F8", //下拉窗口背景颜色
"backgroundTextStyle":light, //下拉 loading 的样式
"enablePullDownRefresh":true, //开启下拉刷新
"onReachBottomdistance":,//页面上拉触发距页面底部距离为60
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},//引用小程序组件
"pageOrientation": "auto"//支持屏幕旋转
},

enablePullDownRefresh 下拉刷新

想要实现页面下拉刷新的效果，需要先在配置文件中将 enablePullDownRefresh 设置为 true，再在.vue页面文件中配合 onPullDownRefresh 函数进行页面下拉效果的实现。

这里很多人会忘记在配置文件中设置 enablePullDownRefresh 配置项，导致下拉效果失灵。
实例：

//pages.json 文件
"globalStyle": {
"enablePullDownRefresh":true
}
//页面.vue文件
onPullDownRefresh() {
console.log('refresh');
//用stopPullDownRefresh结束下拉
uni.stopPullDownRefresh();
}

pageOrientation 屏幕旋转设置

这个属性可以设置为 auto、portrait、landscape。分别代表启用屏幕旋转、固定为竖屏显示、固定为横屏显示。默认值为 portrait 固定为竖屏显示。

这个属性，通常可以使用 js 作为辅助，用 js 读取页面的显示区域尺寸，来进行屏幕方向的监听，每次屏幕旋转时都会调用这个方法。需要注意的是，在模拟器上面不会触发这个方法，需要使用真机调试才能触发。
实例：

Page({
onResize(res) {
res.size.windowWidth // 新的显示区域宽度
res.size.windowHeight // 新的显示区域高度
}
})

页面配置
页面配置只作用于单个页面，与全局配置冲突的地方，页面配置会覆盖掉全局配置。在项目根目录下面的 pages.json 文件中，找到 pages 配置项里面的 style 来进行页面配置。

配置项属性
属性   描述
path   页面路径
style   页面窗口表现，配置项详见1
实例：

{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页", //设置页面标题文字
"disableScroll": true, //设置为true则页面整体不能上下滚动
"enablePullDownRefresh":true, //开启下拉刷新
"navigationBarShadow": {
"colorType": "green"
},//导航栏阴影
}
},
...
]
}
navigationBarShadow 导航栏阴影

导航栏阴影设置项不是所有的颜色都支持，需要注意哦。

属性   描述
colorType   阴影的颜色，支持：grey、blue、green、orange、red、yellow

uni-app 项目的配置主要就是这些内容，比较简单，但是很多细节需要我们去注意和掌握。如果掌握不熟练，会在实际开发的过程中埋下很多坑。
本小节主要介绍了 uni-app 项目的全局配置和页面配置，重点如下：

了解几个常用配置项属性的作用；
了解全局配置和页面配置的应用。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!