# uni-app开发-实战总结 # 顶部导航栏制作（uView）

news/2024/7/24 12:07:40

本文的顶部导航栏为使用uView的导航栏组件------ Navbar 自定义导航栏

（首先先确保HBuilder X已经安装了uView ）

uView里面的导航栏，相比于官方自带的，

会有更多的样式及参数，所以在实际开发中，也可以多使用这个自定义导航栏组件

一、参数

以下是组件的一些参数：

API

#Props

参数说明类型默认值可选值
height导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是pxString | Number44-
back-icon-color左边返回图标的颜色String#606266-
back-icon-name左边返回图标的名称，只能为uView自带的图标，1.5.5起由arrow-left调整为nav-backStringnav-back-
back-icon-size左边返回图标的大小，单位rpxString | Number30-
back-text返回图标右边的辅助提示文字String--
back-text-style返回图标右边的辅助提示文字的样式，对象形式Object{ color: '#606266' }-
title导航栏标题，如设置为空字符，将会隐藏标题占位区域String--
title-width导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpxString | Number250-
title-color标题的颜色String#606266-
title-size导航栏标题字体大小，单位rpx，1.5.5起由32调整为44String | Number44-
z-index固定在顶部时的z-index值String | Number980-
is-back是否显示导航栏左边返回图标和辅助文字Booleantruefalse
background导航栏背景设置(APP和小程序上包括状态栏的颜色)，见上方说明Object{ background: '#ffffff' }-
is-fixed导航栏是否固定在顶部Booleantruefalse
border-bottom导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值Booleantruefalse
custom-back 1.3.4自定义返回逻辑方法，如传入，点击返回按钮执行函数，否则正常返回上一页，注意模板中不需要写方法参数的括号Function--
immersive 1.5.6沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效Booleanfalsetrue
title-bold导航栏标题字体是否加粗 1.7.8Booleanfalsetrue

#Slot

名称说明
-自定义中间部分的内容
right

自定义右侧部分内容

详细参数

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	/**
	 * navbar 自定义导航栏
	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
	 * @tutorial https://www.uviewui.com/components/navbar.html
	 * @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
	 * @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
	 * @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
	 * @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
	 * @property {String} back-text 返回图标右边的辅助提示文字
	 * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
	 * @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
	 * @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
	 * @property {String} title-color 标题的颜色（默认#606266）
	 * @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
	 * @property {Function} custom-back 自定义返回逻辑方法
	 * @property {String Number} z-index 固定在顶部时的z-index值（默认980）
	 * @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
	 * @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
	 * @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
	 * @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
	 * @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
	 * @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
	 */
	export default {
		name: "u-navbar",
		props: {
			// 导航栏高度，单位px，非rpx
			height: {
				type: [String, Number],
				default: ''
			},
			// 返回箭头的颜色
			backIconColor: {
				type: String,
				default: '#606266'
			},
			// 左边返回的图标
			backIconName: {
				type: String,
				default: 'nav-back'
			},
			// 左边返回图标的大小，rpx
			backIconSize: {
				type: [String, Number],
				default: '44'
			},
			// 返回的文字提示
			backText: {
				type: String,
				default: ''
			},
			// 返回的文字的 样式
			backTextStyle: {
				type: Object,
				default () {
					return {
						color: '#25AFA2'
					}
				}
			},
			// 导航栏标题
			title: {
				type: String,
				default: ''
			},
			// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
			titleWidth: {
				type: [String, Number],
				default: '250'
			},
			// 标题的颜色
			titleColor: {
				type: String,
				default: '#606266'
			},
			// 标题字体是否加粗
			titleBold: {
				type: Boolean,
				default: true
			},
			// 标题的字体大小
			titleSize: {
				type: [String, Number],
				default: 32
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
			background: {
				type: Object,
				default () {
					return {
						background: '#ffffff'
					}
				}
			},
			// 导航栏是否固定在顶部
			isFixed: {
				type: Boolean,
				default: true
			},
			// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
			immersive: {
				type: Boolean,
				default: false
			},
			// 是否显示导航栏的下边框
			borderBottom: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: [String, Number],
				default: ''
			},
			// 自定义返回逻辑
			customBack: {
				type: Function,
				default: null
			}
		},
		data() {
			return {
				menuButtonInfo: menuButtonInfo,
				statusBarHeight: systemInfo.statusBarHeight
			};
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
				style.height = this.navbarHeight + 'px';
				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
				// 合并用户传递的背景色对象
				Object.assign(style, this.background);
				return style;
			},
			// 导航中间的标题的样式
			titleStyle() {
				let style = {};
				// #ifndef MP
				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				// #endif
				// #ifdef MP
				// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
					'px';
				// #endif
				style.width = uni.upx2px(this.titleWidth) + 'px';
				return style;
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.height ? this.height : 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return this.height ? this.height : height;
				// #endif
			}
		},
		created() {},
		methods: {
			goBack() {
				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
				if (typeof this.customBack === 'function') {
					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
					this.customBack.bind(this.$u.$parent.call(this))();
				} else {
					uni.navigateBack();
				}
			}
		}
	};
</script>

二、注意事项

在使用uview的导航栏组件------ Navbar 自定义导航栏的时候，那我们就需要在page.json里面取消该页面的自带导航栏样式

三、导航栏组件使用

以下是我们要实现的几种导航栏效果图

效果1：

那我们可以这样写：

<u-navbar 
    title="我的好友"  //导航栏的标题
    title-color="#25AFA2"  //导航栏标题的颜色
    titleCenter="true"  //导航栏是否设置在中间
     back-icon-name="/" //返回图标，设置“/”就可以去掉这个图标
>
</u-navbar>

效果2：

我们可以这样写：

<!-- 页面顶部导航栏 -->
<view>
	<u-navbar 
        title="我的发布" // 标题的内容
        title-color="#25AFA2" //标题的颜色
        back-icon-name="nav-back" //返回图标“nav-back”，
        back-icon-color="#25AFA2" //返回图标的颜色
		back-text="返回" //返回图标右边的文字
>
    </u-navbar>
</view>

效果3:

<!-- 页面顶部导航栏 -->
		<view>
			<u-navbar 
                back-icon-name="nav-back"  //返回图标"nav-back"
                back-icon-color="#FFFFFF" // 返回图标的颜色
                back-text="返回" // 返回图标右边的文字
                :background="background" //绑定背景
				class="navbar"  
                :immersive="false"  //是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
                :border-bottom="false" // 是否显示导航栏的下边框，这里不显示
                >
				    <view class="slot-wrap">
					    <uni-icons type="search" // 设置右边的搜索图标
                                    class="headicon" size="20" // 尺寸
                                        color="#ffffff">
                        </uni-icons>
				    </view>
			</u-navbar>


return {
		background: {
					backgroundColor: 'transparent' //设置背景为透明
				    },
       }



	.slot-wrap {
		display: flex;
		padding: 0 30rpx;
		margin-left: auto;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */

	}

 


http://www.niftyadmin.cn/n/615245.html

相关文章

#uni-app项目配置# uView安装 UI框架

#uni-app项目配置# uView安装 UI框架

安装之前&#xff1a; 确保您下载的Hbuilder X为APP开发版&#xff0c;而非标准版&#xff0c; 并且在"工具-插件安装"中安装了"scss/sass编译"插件 安装步骤&#xff1a; 1、下载地址&#xff1a;https://ext.dcloud.net.cn/plugin?id1593 2、导入插…
阅读更多...
#小程序# 页面跳转、顶部滑动导航栏

#小程序# 页面跳转、顶部滑动导航栏

#小程序# 页面跳转、顶部滑动导航栏 1、底部栏的制作 在app.json里面&#xff1a; {"pages":["pages/index/index","pages/logs/logs","pages/class/class","pages/cart/index/cart","pages/center/center"],&qu…
阅读更多...
#小程序# 一些项目开发总结知识点

#小程序# 一些项目开发总结知识点

#小程序# 一些项目开发总结&知识点 &#xff08;1&#xff09;如何新创建一个页面&#xff1f; &#xff08;温馨提示&#xff1a;就是需要进行点击跳转的页面&#xff0c;才需要在app.js里面进行配置路由&#xff0c;其他不用&#xff01;&#xff01;&#xff09; 只需要…
阅读更多...
#小程序# 从商品列表页跳转到相应的商品详情页

#小程序# 从商品列表页跳转到相应的商品详情页

#小程序# 从商品列表页跳转到相应的商品详情页 需求&#xff1a; 从商品列表页&#xff0c;跳转到指定的商品详情页 思路: 首先写好商品列表的一个内容样式&#xff08;类似于一个小卡片&#xff09;&#xff0c; 然后通过循环&#xff0c;将数据传入到里面&#xff0c;循环出…
阅读更多...
#uni-app# 组件复用

#uni-app# 组件复用

前言 为什么需要组件复用&#xff0c; 那是因为在实际开发里面&#xff0c;往往会有一些重复性的版块&#xff0c; 这个时候为了减少代码的书写以及更高效地进行开发&#xff0c; 我们就会用到组件复用 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考…
阅读更多...
#uni-app 开发项目实战# 下拉刷新，上拉加载数据

#uni-app 开发项目实战# 下拉刷新，上拉加载数据

一、下拉刷新的思路&#xff1a; 第一步&#xff1a; 在pages.json里面&#xff0c; 找到想要设置下拉刷新的页面&#xff0c; 进行配置 加入-----"enablePullDownRefresh":true "enablePullDownRefresh":true 第二步&#xff1a; 2种方式进行下拉…
阅读更多...
#弹性布局#（附源码） justify-content:space-between 强制换行，最后一行左对齐

#弹性布局#（附源码） justify-content:space-between 强制换行，最后一行左对齐

#弹性布局# justify-content:space-between 最后一行左对齐 一、需求&#xff1a; 一行3个子盒子、 父盒子左右有边距、 会自动换行、 下一行的子盒子左对齐 二、知识点&#xff1a; 弹性布局、 v-for循环渲染、 magin、 盒子居中对齐、 伪元素占位 三、源码示例如下&…
阅读更多...
#uni-app 开发项目实战#（附源码） 实现上传图片及预览功能

#uni-app 开发项目实战#（附源码） 实现上传图片及预览功能

需求&#xff1a;实现图片上传及预览功能 知识点&#xff1a;v-for渲染、数组、api使用、flex布局 上传图片与预览的思路及步骤 一、上传图片 步骤&#xff1a; &#xff08;1&#xff09;首先进行排版&#xff0c;排版出我们需要的放图片的位置 》》》》点击参考图片排版…
阅读更多...
最新文章

Copyright @ 2022~2023