基于uni-app的沉浸式导航栏配置

最新推荐文章于 2024-02-17 13:24:53 发布
最新推荐文章于 2024-02-17 13:24:53 发布
阅读量3.3k 收藏 4
点赞数
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxjianghailan/article/details/107534907
版权

本文是基于uni-app的 沉浸式导航栏配置

uni-app的官网：

https://uniapp.dcloud.io/collocation/pages

 这些配置在pages.json中，如下：

 为了设置沉浸式导航栏：点击“pages”，跳进下图位置，再点击pageStyle

 可以看到style，用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

 在代码中就是

设置之后就可以达到如下效果：

 

hailanBlue
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp之导航栏设置和沉浸式的解决方法
qq_43537814的博客
03-02 5950
加粗样式使用uniapp无论是开发App还是微信小程序，都避免不了设置导航栏；自定义导航栏会产生一个沉浸式，下面就是设置导航栏和解决沉浸式的方法 设置系统原生导航栏： //在pages.json中 "app-plus": { "scrollIndicator": "none", //隐藏滚动条 "titleNView": { // 搜索框配置 "searchInput": { "align": "center", "backgrou
沉浸式状态栏（渐变透明）
08-31
沉浸式状态栏是一种在移动设备应用中常见的设计技术，它可以使应用界面的顶部状态栏与内容融为一体，增强用户的视觉体验。这种效果通常伴随着颜色的变化，比如渐变透明，使得状态栏在不同场景下呈现出不同的透明度或...
沉浸式导航栏+图片背景+图片拉伸
08-04
实现沉浸式导航栏+图片背景和图片下拉拉伸回弹+导航栏渐变
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
qq_52925863的博客
10-21 2562
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uniapp设置导航栏、沉浸式导航栏以及获取屏幕尺寸
EvaY_Yang的博客
07-01 5257
页面上往往会有一些需要随着屏幕的大小变化而变化的样式，这时，我们就需要获取到屏幕的宽度和高度，获取屏幕的尺寸可以通过uni.getSystemInfo来获取。
uni-app导航栏开发指南
weixin_42017221的博客
02-17 2022
注意：按钮的点击事件需要在页面监听事件data() {return {}},console.log("点击了自定义按钮");"style": {}]buttons的text推荐使用字体图标。如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度等值。配置button的背景颜色为透明：background:'rgba(0,0,0,0)'以上代码在hello uni-app的模板-顶部导航标题栏中有示例。
uniapp框架-uni-app封装组件合集-自动更新并安装&沉浸式状态栏(线性渐变)&顶部tabbar&仿UC列表.zip
最新发布
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
微信小程序(uniapp + uView)自定义导航栏
02-29
微信小程序(uniapp + uView)自定义导航栏
32个uniapp项目源码 涵盖商城团购等
05-10
源码列表： IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)...uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip uni-app全局变量的几种实现方式.zip uni-app的markdown富文本编辑器插件uniapp-
32个uniapp项目源码 涵盖商城团购等，32个案例.zip
11-03
源码类型列表： IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip ...uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip uni-app全局变量的几种实现方式.zip 等等...
uniapp沉浸式渐变状态栏
vV的博客
05-25 1685
沉浸式渐变标题栏
uniapp 导航栏图标添加步骤
m0_65730686的博客
10-19 2546
uniapp 导航栏图标添加步骤
Uniapp webview 开启沉浸式 和 全面屏配置设置透明标题栏 透明状态栏
cnoneo的博客
10-09 8788
Uniapp webview 开启沉浸式 和 全面屏配置 直接看注释 { "@platforms": ["android", "iPhone", "iPad"], "id": "xxxxx", /*应用的标识*/ "name": "云管家", /*应用名称，程序桌面图标名称*/ "version": { "name": "1.1.1", /*应用版本名称*/ "code":...
【uni-app沉浸式状态栏“显示不全”】如何去掉沉浸式状态栏
红烧咸咸鱼
06-29 721
【代码】【uni-app沉浸式状态栏“显示不全”】如何去掉沉浸式状态栏。
uniapp使用Uview的Navbar自定义微信小程序顶部导航栏，滚动渐变透明效果；看完不会我下跪
toHero的博客
01-10 2269
使用Navar自定义微信小程序顶部导航栏，实现滚动背景色渐变效果；
uniappiphonex沉浸式导航栏
asd2437252087的博客
11-18 597
uniapp iphonex底部安全区域设置，在applus添加。uniappiphonex头部沉浸式导航栏设置。具体参考uniapp官网，适配文档。
uniapp自定义导航栏配置及沉浸式处理
ASP.NET
10-19 2249
备注：一般App里不会使用这个配置,建议个别页面单独设置不使用原生导航。 "globalStyle": { "navigationStyle": "custom", }, 2. 单独去除原生导航栏 2.1App单独去除原生导航栏(方法一) { "path" : "pages/index/index", "style" : { "navigationBarTitleText": "首页", "app-plus":{
uni-app中设置沉浸状态栏
站在顶峰看星星
05-26 4511
场景： 在App开发中，我们会经常遇到以下这种情况： 原生导航栏不占位置，也就是说内容是从屏幕可视区开始渲染的 原生导航栏的颜色可以自定义 解决方案： 全局取消原生导航栏，注释或者删除即可。 在每个页面单独配置style，当navigationStyle设为custom或titleNView设为false时，原生导航栏不显示： { "path": "pages/detail/detail", "style": { // "navigationStyle":"custom", "navi
uniapp-H5-沉浸式导航的设置
LzzMandy的博客
12-29 1569
适用场景： H5端的沉浸式导航 实现方法： 1、page.json中设置导航栏 { "path": "pages/test-11-chenjin/chenjin", "style": { "app-plus": { "titleNView": { "type": "transparent",//导航栏样式。"transparent"-滚动透明渐变 "buttons": [{ type": "share" }] } } } } 2
uni-app app沉浸式状态栏
07-08
要在uni-app中实现沉浸式状态栏，可以通过以下步骤： 1. 在manifest.json文件中设置“statusBar”属性，如下所示： ``` "statusBar": { "backgroundColor": "#ffffff", "textColor": "black", "displayMode": "dark" } ``` 2. 在App.vue中设置页面样式，并且设置“navigationStyle”属性为“custom”，如下所示： ``` <style> .status-bar { height: env(safe-area-inset-top); background-color: #ffffff; } </style> <template> <div class="status-bar"></div> <router-view></router-view> </template> <script> export default { config: { navigationStyle: 'custom' } } </script> ``` 这样就可以实现在uni-app中的沉浸式状态栏了。需要注意的是，不同的手机品牌和系统版本可能对沉浸式状态栏的支持有所不同，所以可能需要在不同的手机上进行测试和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值