Vue pages.json页面路由中globalStyle的各个属性详解

一.navigationBarBackgroundColor（导航栏的背景颜色）

1.演示

运行效果

2.注意事项

该属性的值，只能是十六进制的，而不能使用RGB或者颜色英文（如pink）。

二.navigationBarTextStyle（导航栏的标题颜色）

1.演示

运行效果

2.注意事项

navigationBarTextStyle的属性，只支持white（白色）/  black（黑色）

三.navigationBarTitleText（导航栏的标题文字）

1.演示

运行效果 

2.注意事项

每个页面被创建时，我们可能设置了每个页面的标题文字，这个权重更高，所以会覆盖上面那个全局的标题文字。

因此我们想用全局的标题文字，那就要删除某个页面自己的标题文字。

四.navigationStyle（是否显示导航栏）

1.演示

运行结果

2.注意事项

navigationStyle的值，只有两种：①default（显示导航栏） ②custom（隐藏导航栏）

五.backgroundColor（下拉窗口的背景色）、enablePullDownRefresh（是否允许下拉刷新）

1.演示

运行效果

2.注意事项

我们要开启允许下拉刷新，才会显示下拉窗口，此时下拉窗口的背景色才有意义。

而且这个下拉刷新，默认只在微信小程序中生效。

六.onReachBottomDistance（距离页面底部多远时，触发触底函数）

1.演示

但是触底函数，需要我们自己编写

<template>
	<view class="" v-for="item in 100">
		{{item}}
	</view>
</template>
<script setup>
import {onReachBottom} from "@dcloudio/uni-app";
onReachBottom(()=>{
	console.log("触发触底函数了");
})
</script>
<style lang="scss" scoped>
</style>

运行效果

2.应用场景

大多数app，都有触底刷新，加载更多内容的功能，如下

最后

有什么不懂的，可以直接去官网查询每个属性的详细介绍。

到此这篇关于Vue pages.json页面路由中globalStyle的各个属性详解的文章就介绍到这了,更多相关vue pages.json页面路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！