uniapp 自定义导航菜单 学习

最新推荐文章于 2025-05-27 10:43:04 发布
原创 最新推荐文章于 2025-05-27 10:43:04 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用自定义导航栏组件实现不同样式和交互效果，包括基本用法、左右文字显示及插槽使用等。

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

利用官方提供的例子

1.找到page源文件（page/extUI/nav-bar）复制

<template>
	<view>
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" left-text="返回" title="标题" @clickLeft="back" />
		<text class="example-info">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
		<uni-section title="基本用法" type="line"></uni-section>
		<view class="example-body">
			<uni-nav-bar left-icon="arrowleft" title="标题" @clickLeft="back" />
		</view>

		<uni-section title="左右显示文字" type="line"></uni-section>
		<view class="example-body">
			<uni-nav-bar left-icon="arrowleft" right-text="菜单" left-text="返回" title="标题" @clickLeft="back" />
		</view>
		<uni-section title="插入slot" type="line"></uni-section>
		<view class="example-body">
			<uni-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="showCity" @clickRight="scan">
				<block slot="left">
					<view class="city">
						<view><text class="uni-nav-bar-text">{{ city }}</text></view>
						<uni-icons type="arrowdown" color="#333333" size="22" />
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
				</view>
			</uni-nav-bar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				city: '北京'
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {

				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {

				uni.showToast({
					title: '选择城市'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.uni-nav-bar-text {
		font-size: 14px;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		/* width: 160rpx;
 */
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		/* width: 500rpx;
 */
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-uni-icon {
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 14px;
		background-color: #f8f8f8;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0;
	}
</style>

分析引入了uni-section和uni-nav-bar组件

2.复制组件uni-section

<template>
	<view class="uni-section" nvue>
		<view v-if="type" class="uni-section__head">
			<view :class="type" class="uni-section__head-tag" />
		</view>
		<view class="uni-section__content">
			<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
			<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
		</view>
		<slot />
	</view>
</template>

<script>
	/**
	 * Section 标题栏
	 * @description 标题栏
	 * @property {String} type = [line|circle] 标题装饰类型
	 * 	@value line 竖线
	 * 	@value circle 圆形
	 * @property {String} title 主标题
	 * @property {String} subTitle 副标题
	 */

	export default {
		name: 'UniTitle',
		props: {
			type: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			subTitle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		watch: {
			title(newVal) {
				if (uni.report && newVal !== '') {
					uni.report('title', newVal)
				}
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>
<style scoped>
	.uni-section {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		margin-top: 10px;
		flex-direction: row;
		align-items: center;
		padding: 0 10px;
		height: 50px;
		background-color: #f8f8f8;
		/* #ifdef APP-NVUE */
		border-bottom-color: #e5e5e5;
		border-bottom-style: solid;
		border-bottom-width: 0.5px;
		/* #endif */
		font-weight: normal;
	}

	/* #ifndef APP-NVUE */
	.uni-section:after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #e5e5e5;
	}

	/* #endif */

	.uni-section__head {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.line {
		height: 15px;
		background-color: #c0c0c0;
		border-radius: 5px;
		width: 3px;
	}

	.circle {
		width: 8px;
		height: 8px;
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		background-color: #c0c0c0;
	}

	.uni-section__content {
		flex-direction: column;
		flex: 1;
		color: #333;
	}

	.uni-section__content-title {
		font-size: 14px;
		color: #333;
	}

	.distraction {
		flex-direction: row;
		align-items: center;
	}

	.uni-section__content-sub {
		font-size: 12px;
		color: #999;
	}
</style>

2.1复制uni-nav-bar组件

<template>
	<view>
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" left-text="返回" title="标题" @clickLeft="back" />
		<text class="example-info">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
		<uni-section title="基本用法" type="line"></uni-section>
		<view class="example-body">
			<uni-nav-bar left-icon="arrowleft" title="标题" @clickLeft="back" />
		</view>

		<uni-section title="左右显示文字" type="line"></uni-section>
		<view class="example-body">
			<uni-nav-bar left-icon="arrowleft" right-text="菜单" left-text="返回" title="标题" @clickLeft="back" />
		</view>
		<uni-section title="插入slot" type="line"></uni-section>
		<view class="example-body">
			<uni-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="showCity" @clickRight="scan">
				<block slot="left">
					<view class="city">
						<view><text class="uni-nav-bar-text">{{ city }}</text></view>
						<uni-icons type="arrowdown" color="#333333" size="22" />
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
				</view>
			</uni-nav-bar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				city: '北京'
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {

				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			showCity() {

				uni.showToast({
					title: '选择城市'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.uni-nav-bar-text {
		font-size: 14px;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		/* width: 160rpx;
 */
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		/* width: 500rpx;
 */
		flex: 1;
		background-color: #f8f8f8;
		height: 30px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-uni-icon {
		line-height: 30px;
	}

	.nav-bar-input {
		height: 30px;
		line-height: 30px;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 14px;
		background-color: #f8f8f8;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0;
	}
</style>

3.找到自己要编辑的页面

<!-- 发布页面 -->
<template>
	<!-- <uni-section title="基本用法" type="line"></uni-section> -->
	<view >
		<uni-nav-bar :statusBar="true"  rightText="发布" left-icon="back"  @clickLeft="back"  @clickRight="submit">
		   <view class="center-display" @tap="changelook">
			   {{yinshi}}
			   <view class="icon iconfont icon-xialazhankai"></view>
			</view>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue";
	
	let changelook=["所有人可见",'仅自己可见']
	export default {
		components:{
			uniNavBar
		},
		data() {
			return {
				yinshi:"所有人可见"
			}
		},
		methods: {
			//返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//发布
			submit(){
				console.log("发布")
			},
			//隐私
			changelook(){
				/* console.log("隐私")	 */		
				uni.showActionSheet({
					itemList: changelook,
					success:  (res)=> {
							this.yinshi=changelook[res.tapIndex];
						}
				});
			}
		}
	}
</script>

<style>
	.center-display{
		display: flex;
		align-items: center;  /* 垂直方向居中 */
		justify-content: center;  /* 左右方向居中   bug 未生效*/
		
	}

</style>

备注：

:statusBar="true"    默认为false  （开启不会顶到手机状态栏）

left-icon="back"       字体图标

 @clickLeft="back"       左边返回

 @clickRight="submit"      右边发布

 

 

 

问题：

1.justify-content: center;居中样式未生效

2.安卓端返回按钮正常，浏览器点击没反应

3.发现状态栏是白色的，还没解决


 

uniapp slot插槽的使用及自定义弹窗
qq_36158551的博客
07-12 441
（1）组件源码：slot-dialog.vue<template>--标题布局--></view>--内容布局--></view>--操作布局--></text></view></text></view></view></view></view><script>props: {//默认是否显示},//取消按钮文字},//取消样式},//确定按钮文字default: '确定'},//确定样式},//阻止点击对话框外侧锁屏},methods: {},
uniapp自定义的下面导航
科技是唯一动力，干就完了
06-08 1365
在工作中需要自定定义好看一点的头部和导航栏下面目前感觉还是很简单的可以自己也可以在优化一下。
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email [email protected] wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
uniapp 菜单栏
从盲流子到程序员
04-06 1622
uniapp滚动菜单
uniapp自定义导航
闫的博客
02-21 1183
3、可切换的导航背景图。1、简单的标题和返回。
【unaipp】tabBar配置/tabBar图标无法显示
Xiang_Gong_Ya_的博客
10-25 3670
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
uniapp微信小程序 --下拉菜单
apple_70049717的博客
01-21 5769
uniapp微信小程序下拉菜单
uniapp_自定义顶部导航栏组件
分享程序相关知识
05-08 2936
uniapp的顶部导航栏有时候不符合设计需求，我们可以自定义顶部导航栏。uniapp顶部自定义导航栏组件使用vue3，适用微信小程序和APP。
UniApp开发鸿蒙应用中实现自定义导航栏的详细教程
2401_82505179的博客
05-14 1013
本文详细介绍了在UniApp开发鸿蒙应用时如何实现自定义导航栏的步骤和技巧。首先，通过全局或局部配置隐藏默认导航栏，然后创建自定义导航栏组件，并在页面中注册和使用该组件。文章还特别强调了适配鸿蒙平台的注意事项，如状态栏高度适配和导航栏高度计算。此外，教程还提供了高级功能扩展，如动态修改导航栏样式和夜间模式切换，并附有完整的示例代码。
uniApp自定义tabBar底部导航栏+实现tabBar中间凸起自定义样式
weixin_52830464的博客
05-28 1970
pages.js 添加 "custom": true 属性。
uniapp自定义底部导航栏
葫芦娃y的博客
01-09 1872
uniapp自定义底部导航栏
uniapp 顶部tab切换菜单
03-16
最近在使用uniAPP做项目，页面中要使用到顶部tab菜单，但又不想使用别人的插件，于是自己用代码实现了一下
uniapp分类菜单选择或滚动联动
wendy_qx的博客
02-26 972
【代码】uniapp分类菜单选择或滚动联动。
uni-app兼容app-h5-微信小程序——下拉菜单、搜索栏
NanChen的博客
11-29 5390
globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景色等。 属性 类型 默认值 描述 平台差异说明 backgroundColor HexColor #ffffff 下拉显示出来的窗口的背景色 微信小程序 backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark / light 微信小程序 enablePullDownRefresh Boolea
鸿蒙OS&UniApp 实现带搜索功能的下拉菜单#三方框架 #Uniapp
最新发布
小淼淼的博客
05-27 1055
带搜索功能的下拉菜单是提升移动端表单与筛选体验的利器。通过 UniApp 的组件化和跨平台特性，我们可以高效实现兼容鸿蒙的高性能下拉菜单。未来还可结合远程搜索、分组展示等进一步丰富场景。希望本文的讲解和代码示例能为你的项目带来启发，欢迎留言交流更多鸿蒙适配经验！
uniapp 模仿 Android的Menu菜单栏
tengyuxin的博客
10-29 1284
下面这张图就是我们要模拟的菜单功能。
uni-app的使用
weixin_58431406的博客
02-15 1185
创建项目-介绍项目目录和文件作用-运行项目-创建新的页面-通过pages来配置页面- 通过style修改页面的标题和导航栏背景色-配置tabbar-组件的基本使用-数据绑定- v-for循环-事件绑定-生命周期-网络请求-导航跳转------uni-app中使用uView 组件库：
uniapp-实现左侧菜单栏与右侧功能区联动~（保姆级）个人思路，需求实测实现啦~
m0_62626838的博客
07-19 1901
1、需求1：实现左侧菜单栏与右侧功能区联动~。当点击切换左侧菜单栏时需变色同时需将其对应右侧功能区节点滑动至顶部。2、需求2：实现滑动右侧功能区，当其所处的功能区节点刚刚触顶时，需切换左侧菜单栏与之对应。炒毛豆也是刚刚接触小程序。后续会将学习心得不定时记录~（仅做个人笔记使用）5、需求实测实现啦~
关于uniapp下拉菜单展示及源码修改
fanx_home的博客
06-24 996
综合体验，uni-data-select不太符合需求，但用的地方多，不适合改动源码。rudon-rowMenuDotDotDot 支持定制化placeholder，但大小不好调整，而且我的下拉菜单没有展示出来，且源码稍微有点复杂。页面功能太多放不下，想通过...方式展示，当点击时直接跳转页面，不会修改标题。2、插件：, 在uniapp中搜索插件。1、uniapp提供得 3、默认的字体颜色是灰色，配背景色显得很脏，改字体颜色。
uniapp 自定义导航
02-25
### 如何在 UniApp 中实现自定义导航栏 #### 自定义顶部导航栏 为了创建一个带有特定背景颜色、字体颜色以及阴影效果的自定义顶部导航栏，在页面组件内可以利用 `uni-nav-bar` 组件来完成。此组件允许开发者通过属性设定来自由调整样式。 ```html <template> <view> <!-- 使用 uni-nav-bar 实现自定义导航栏 --> <uni-nav-bar background-color="#F8F8F8" color="#000000" shadow="false" :status-bar="status_bar" :title="nav_title"> </uni-nav-bar> <!-- 页面其他内容 --> </view> </template> <script> export default { data() { return { title: '你好，uniapp', nav_title: '联系人', // 设置导航栏显示的文字 status_bar: true // 控制是否展示状态栏高度占位符 } }, } </script> ``` 上述代码片段展示了如何向页面添加一个具有灰色背景(`background-color`)和黑色文字(`color`)的导航条目[^1]。同时关闭了默认存在的下划线(`shadow="false"`), 并且启用了状态栏的高度预留空间(`:status-bar="true"`). #### 配置底部导航栏 (TabBar) 对于希望增加应用底部固定位置菜单的情况，则需编辑项目的全局配置文件 `pages.json`, 添加 tabbar 属性并指定各个选项卡的相关参数： - **list**: 定义每一个标签页的信息数组； - **pagePath**: 对应页面路径； - **text**: 显示于按钮上的文本说明； - **iconPath** 和 **selectedIconPath**: 分别指定了正常状态下与选中状态下的图标资源地址； ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "./static/images/home.png", /* 此处填写未激活时图标的相对路径 */ "selectedIconPath": "./static/images/home-active.png"/* 激活后的图标路径 */ }, ... ] } } ``` 这段 JSON 片段描述了一个简单的两层结构，其中包含了至少一个 TabBarItem 的基本信息[^2]. 用户可以根据实际需求扩展这个列表以适应更多功能模块的需求.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值