目录pages.JSON文件页面部分或首页部分注意:附:uni-app如何动态设置页面的标题1. 新建页面2. js动态修改标题总结 当设置 "navigatio
当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏
代码块
//页面配置
"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>
正常情况下,在创建页面时会在pages.json
里生成一段代码,即可在内调整页面的标题。如图:
效果如图:
这种方式可已满足大多数人的需求,但是总有那么一些人需求比较不同。希望能够在页面内进行动态的调整标题,那么该如何进行设置呢?
代码如下:
<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自定义顶部标题栏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: uni-app配置APP自定义顶部标题栏设置方法与注意事项
本文链接: https://www.lsjlt.com/news/165625.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0