uni-app小程序自定义导航栏

fighting ~

于 2024-01-30 16:03:02 发布

阅读量1k

点赞数 7

文章标签： uni-app 小程序前端

本文链接：https://blog.youkuaiyun.com/qq_38970408/article/details/135931841

版权

本文介绍了如何在uni-app开发中使用自定义导航栏，包括在page.json中配置、index.js中的代码实现以及处理iOS状态栏问题。还提到如何使用`uni-nav-bar`设置返回键和状态栏高度计算方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在开发一个uni-app小程序，用到了自定义导航栏，在这里记录一下实现过程：

page.json

在对应页面路由的style中设置入"navigationStyle": "custom"取消原生导航栏，自定义导航栏

{
   
	"path": "pages/index/index",
	"style": {
   
		"navigationBarTitleText": "保单详情",
		"navigationBarTextStyle": "light",
		"navigationStyle": "custom"
	}
},

index.js（nvue）

<template>
	<view class="content">
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
		<uni-nav-bar class="title" left

最低0.47元/天解锁文章