uni-app配置APP自定义顶部标题栏设置方法与注意事项

 更新时间:2022年07月29日 15:46:07   作者:企鹅-菜鸟  
相信很多小伙伴在使用uniapp进行多端开发的时候,在面对一些业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这篇文章主要给大家介绍了关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的相关资料,需要的朋友可以参考下

当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏

pages.json文件

代码块

//页面配置
"path": "pages/index/index",
        "style": {
            "app-plus": { //app配置自定义导航
                "titleNView": false //app禁止使用原神导航
            }
        }
},
 
"globalStyle": {
 
        "navigationStyle":"custom",//禁用原生导航
        
    }

页面部分或首页部分

代码块

<template>
    <view class="status_bar"><!-- 这里是状态栏 --></view>
    <view class="box-fel">
    <!--状态栏下的文字 -->
        <view>
            <image style="width: 100rpx; height: 100rpx;" src="../../static/logo.png">        </image>
        </view>
        <view>关注</view>
        <view>发现</view>
        <view>附近</view>
        <view>搜索</view>
    </view>
</template>
 
<style lang="scss">
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

注意:

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
  • 由于在 H5 端,不存在原生导航栏和 tabbar,也是前端 div 模拟。如果设置了一个固定位置的居底 view,在小程序和 App 端是在 tabbar 上方,但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom,不管在哪个端,都是固定在 tabbar 上方。
  • 目前 nvue 在 App 端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。

附:uni-app如何动态设置页面的标题

1. 新建页面

正常情况下,在创建页面时会在pages.json里生成一段代码,即可在内调整页面的标题。如图:

效果如图:

这种方式可已满足大多数人的需求,但是总有那么一些人需求比较不同。希望能够在页面内进行动态的调整标题,那么该如何进行设置呢?

2. js动态修改标题

代码如下:

<script>
	export default {
		data() {
			return {
				dynamicTitle: '这里是动态标题',
			};
		},
		onLoad() {
			// 官网API:https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
			uni.setNavigationBarTitle({
				title: this.dynamicTitle,
				success: () => {
					console.log('修改标题成功')
				},
				fail: () => {
					console.log('修改标题失败')
				},
				complete: () => {
					console.log('修改标题结束')
				},
			})
		}
	}
</script>

效果如图:

总结 

到此这篇关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的文章就介绍到这了,更多相关uni-app自定义顶部标题栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS sort排序详细使用方法示例解析

    JS sort排序详细使用方法示例解析

    这篇文章主要介绍了JS sort排序详细使用方法示例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • javascript中的事件代理初探

    javascript中的事件代理初探

    本文仅仅起到一个抛砖引玉的作用,让大家了解到事件代理的原理而已,jquery中的live和delegate实现要复杂的多
    2014-03-03
  • JS加载解析Markdown文档过程详解

    JS加载解析Markdown文档过程详解

    这篇文章主要介绍了JS加载解析Markdown文档过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 深入理解Javascript里的依赖注入

    深入理解Javascript里的依赖注入

    我喜欢引用这句话,“程序是对复杂性的管理”。计算机世界是一个巨大的抽象建筑群。我们简单的包装一些东西然后发布新工具,周而复始。现在思考下,你所使用的语言包括的一些内建的抽象函数或是低级操作符。这在JavaScript里是一样的
    2014-03-03
  • ES6新特性三: Generator(生成器)函数详解

    ES6新特性三: Generator(生成器)函数详解

    这篇文章主要介绍了ES6新特性之Generator(生成器)函数,简单分析了Generator(生成器)函数的功能、定义、调用方法并结合实例形式给出了相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • .html文件防止script脚本缓存的三种方法

    .html文件防止script脚本缓存的三种方法

    现在有这样一个问题,由于一些原因,我们经常需要修改gTool的代码然后上传更新cdn,但是用户通过 html 文件访问的 gTool 链接实际上还是缓存的,所以现在问题就是如何禁止缓存,文中给大家介绍了三个方法供大家参考,需要的朋友可以参考下
    2024-01-01
  • 使用JSX 建立 Markup 组件风格开发的示例(前端组件化)

    使用JSX 建立 Markup 组件风格开发的示例(前端组件化)

    这篇文章主要介绍了使用JSX 建立 Markup 组件风格开发的示例(前端组件化)本文重点讲解如何从0搭建一个组件系统,在这里我们会学习使用JSX来建立markup 的风格,我们基于与React 一样的 JSX 去建立我们组件的风格
    2021-04-04
  • 详解JavaScript中var和let的区别

    详解JavaScript中var和let的区别

    在JavaScript中,有3个关键字可以声明变量:var、const和let,其中var在ECMAScript的所有版本中都可以使用,而const和let只能在ECMAScript 6及更晚的版本中使用,本文就来说说二者的区别,感兴趣的可以了解一下
    2022-11-11
  • Scala解析Json字符串的实例详解

    Scala解析Json字符串的实例详解

    这篇文章主要介绍了 Scala解析Json字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家学习理解这部分内容,需要的朋友可以参考下
    2017-10-10
  • 微信小程序常用简易小函数总结

    微信小程序常用简易小函数总结

    这篇文章主要介绍了微信小程序常用简易小函数,结合实例形式总结分析了微信小程序提示、登陆、验证、session操作等相关操作函数与使用技巧,需要的朋友可以参考下
    2019-02-02

最新评论