Vue pages.json页面路由中globalStyle的各个属性详解
更新时间：2025年07月24日 14:58:14 作者：雪碧聊技术
文章总结介绍小程序页面配置属性,包括导航栏背景色（限十六进制）、标题颜色（支持white/black）、标题文字（页面级覆盖全局）、导航栏显示隐藏（default/custom）、下拉刷新设置（微信专用）及触底函数触发距离,感兴趣的朋友一起看看吧
一.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页面路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解基于Vue-cli搭建的项目如何和后台交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
Vue Cli3 打包配置并自动忽略console.log语句的方法
这篇文章主要介绍了Vue Cli3 打包配置并自动忽略console.log语句的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本篇文章给大家分享了关于vue的diff算法的相关知识点总结，有兴趣的朋友参考学习下。2018-03-03
这篇文章主要给大家介绍了关于uniapp微信小程序axios库的封装及使用的相关资料,Axios是一个基于promise网络请求库,作用于node.js和浏览器中axios-miniprogram-adapteraxios的小程序适配器,需要的朋友可以参考下2023-08-08
在本篇内容里小编给大家整理了关于vue写h5页面的方法以及注意点分析，有需要的朋友们跟着学习下吧。2019-02-02
数据可视化是现代Web应用程序中的一个重要组成部分，词云是一种非常流行的数据可视化形式，可以用来展示文本数据中的主题和关键字，本文我们将介绍如何在Vue中使用词云库进行数据可视化词云展示和词云生成，需要的可以参考一下2023-06-06
这篇文章主要介绍了基于Vue实现图片在指定区域内移动，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
Vue3表单组件el-form校验规则rules属性示例详解
在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象,这篇文章主要给大家介绍了关于Vue3表单组件el-form校验规则rules属性的相关资料,需要的朋友可以参考下2024-08-08
跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧2021-09-09
本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结，感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
最新评论