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自定义顶部标题栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript弹出窗口的各种方法总结

    Javascript弹出窗口的各种方法总结

    这篇文章介绍了Javascript弹出窗口的各种方法总结,有需要的朋友可以参考一下
    2013-11-11
  • JavaScript调试的多个必备小Tips

    JavaScript调试的多个必备小Tips

    这篇文章主要给大家介绍了关于JavaScript调试的多个必备小Tips,文章给出了详细的介绍与示例代码,有需要的朋友们可以参考借鉴,下面来一起学习学习学习吧。
    2017-01-01
  • JavaScript实现的鼠标跟随特效示例【2则实例】

    JavaScript实现的鼠标跟随特效示例【2则实例】

    这篇文章主要介绍了JavaScript实现的鼠标跟随特效,结合2则实例形式分析了javascript针对鼠标事件的响应、计算、处理及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript 判断对象中是否有某属性的常用方法

    JavaScript 判断对象中是否有某属性的常用方法

    判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。这篇文章给大家介绍了JavaScript 判断对象中是否有某属性的常用方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • 利用JavaScript实现静态图片局部流动效果

    利用JavaScript实现静态图片局部流动效果

    如果你有玩过《王者荣耀》、《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,本文将利用JavaScript实现这一效果,需要的可以参考一下
    2022-08-08
  • javascript 代码是如何被压缩的示例代码

    javascript 代码是如何被压缩的示例代码

    这篇文章主要介绍了javascript 代码是如何被压缩的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • TypeScript 安装使用及基本数据类型

    TypeScript 安装使用及基本数据类型

    这篇文章主要介绍了TypeScript 安装使用及基本数据类型,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • JavaScript遍历Json串浏览器输出的结果不统一问题

    JavaScript遍历Json串浏览器输出的结果不统一问题

    json串属于javascript的一个对象,有键和值对应的对象。这篇文章主要介绍了JavaScript遍历Json串浏览器输出的结果不统一问题的相关资料,需要的朋友可以参考下
    2016-11-11
  • document.createElement("A")比较不错的属性

    document.createElement("A")比较不错的属性

    document.createElement("A")比较不错的属性...
    2007-08-08
  • javascript面向对象程序设计(一)

    javascript面向对象程序设计(一)

    这篇文章主要介绍了javascript面向对象程序设计,分享给大家一段代码,注释里讲解的非常详细,有助于我们理解面向对象,这里推荐给大家。
    2015-01-01

最新评论