亲宝软件园·资讯

展开

uni-app自定义顶部标题栏

企鹅-菜鸟 人气:4

当设置 "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>

注意:

附: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>

效果如图:

总结 

加载全部内容

相关教程
猜你喜欢
用户评论