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页面路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3 elementplus table合并写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
vue2中的el-select组件数据太多,如何实现滚动加载数据效果
这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了rollup3.x+vue2打包组件的实现，详细的介绍了打包会存在的问题，包版本的问题，babel 转换jsx等问题，具有一定的参考价值，感兴趣的可以了解一下2023-03-03
今天小编就为大家分享一篇解决vue.js 数据渲染成功仍报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue 输入框新增搜索历史记录功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
vue项目中vue-i18n和element-ui国际化开发实现过程
这篇文章主要介绍了vue项目中vue-i18n和element-ui国际化开发实现过程，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要为大家介绍了ElementUI Upload源码组件上传流程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在vue中获取wangeditor的html和text的操作
这篇文章主要介绍了在vue中获取wangeditor的html和text的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在实际项目中我们会碰到多层嵌套的组件组合而成，比如我们常见的面包屑导航，下面这篇文章就来给大家介绍关于vue实现动态路由多级嵌套面包屑的思路与方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
最新评论