devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app 自定义导航栏_uniapp自定义导航栏

作者：Monodyee | 2024-05-19 22:31:29

赞

踩

uniapp自定义导航栏

uni-app 自定义导航栏

uni-app 自定义导航栏步骤

在 uni-app 中，可以通过修改页面的导航栏配置来实现自定义导航栏的效果。以下是实现自定义导航栏的一般步骤：

  1. 在 uni-app 项目中找到需要自定义导航栏的页面，例如 pages/index/index.vue。

  2. 在该页面的 <template> 标签中，添加一个自定义的导航栏组件，例如 <custom-navigation-bar>。

  3. 在 <script> 标签中，定义 <custom-navigation-bar> 组件，并在其中添加必要的属性和方法。可以使用 <view> 和其他基本组件来构建导航栏的布局。

  4. 在 onLoad 或 mounted 生命周期钩子中，通过 uni.setNavigationBarTitle() 方法设置导航栏的标题。您可以从页面数据或组件的属性中获取标题信息。

  5. 如果需要隐藏系统原生导航栏，可以通过 uni.hideNavigationBar() 方法进行隐藏。请注意，这可能会导致页面布局上的变化，需要根据实际情况进行调整。

  6. 根据需要，可以在导航栏组件中添加其他功能按钮或样式设置，例如返回按钮、搜索框等。

请注意，以上步骤是一种常见的实现方式，具体实现仍取决于您的项目需求和设计。您可以根据 uni-app 的文档和示例代码，结合自己的实际场景，进行更详细的自定义导航栏开发。

此外，uni-app 还提供了一些插件和组件库，如 uni-ui 和 uView UI，它们也提供了自定义导航栏的选项和样式。您可以根据自己的需求选择适合的组件库进行开发。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

uni-app 自定义导航栏实例

以下是一个示例，演示如何在 uni-app 中自定义导航栏：

  1. 在 pages/index/index.vue 页面中定义一个自定义导航栏组件 <custom-navigation-bar>，并设置相关属性和样式：
<template>
  <view class="custom-navigation-bar">
    <view class="left-button" @click="handleBack">
      返回
    </view>
    <view class="title">
      {{ title }}
    </view>
    <view class="right-button">
      更多
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '首页'
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.custom-navigation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.left-button,
.right-button {
  padding: 0 12px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  1. 在 pages/index/index.vue 中使用自定义导航栏组件，并设置相应的标题：
<template>
  <view class="container">
    <custom-navigation-bar title="首页"></custom-navigation-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  // 页面配置
}
</script>

<style>
.container {
  padding-top: 44px;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这个示例中，我们创建了一个自定义导航栏组件 <custom-navigation-bar>，其中包含了返回按钮、标题和更多按钮。在页面中使用该组件，并通过 title 属性设置导航栏的标题。

请根据自己的项目需求和设计进行相应的样式调整和功能扩展。这只是一个简单的示例，您可以根据实际情况进行自定义导航栏的开发。

uni-app 自定义系统导航栏

原生uniapp的导航栏，并不能满足ui的需求，所以各种查阅资料，导航栏自定义内容.

整理如下：

pages.json

修改pages.json，启动导航栏自适应，设置"navigationStyle": "custom"

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "index",
				"navigationStyle": "custom"    
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

system_info.js

新建system_info.js，用于获取当前设备的机型系统信息。

/**
 * 此js文件管理关于当前设备的机型系统信息
 */
const systemInfo = function() {
	/****************** 所有平台共有的系统信息 ********************/
	// 设备系统信息
	let systemInfomations = uni.getSystemInfoSync()
	// 机型适配比例系数
	let scaleFactor = 750 / systemInfomations.windowWidth
	// 当前机型-屏幕高度
	let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
	// 当前机型-屏幕宽度
	let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
	// 状态栏高度
	let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
 
	// 导航栏高度  注意：此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用：状态栏高度+自定义文本高度
	let navHeight = 0 //rpx
	// console.log(windowHeight,'哈哈哈哈哈');
	
	/****************** 微信小程序头部胶囊信息 ********************/
	// #ifdef MP-WEIXIN
	const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
	// 胶囊高度
	let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
	// 胶囊宽度
	let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
	// 胶囊上边界的坐标
	let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
	// 胶囊右边界的坐标
	let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
	// 胶囊下边界的坐标
	let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
	// 胶囊左边界的坐标
	let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
 
	// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
	navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
	// #endif
 
 
	// #ifdef MP-WEIXIN
	return {
		scaleFactor,
		windowHeight,
		windowWidth,
		statusBarHeight,
		menuButtonHeight,
		menuButtonWidth,
		menuButtonTop,
		menuButtonRight,
		menuButtonBottom,
		menuButtonLeft,
		navHeight
	}
	// #endif
 
	// #ifndef MP-WEIXIN
	return {
		scaleFactor,
		windowHeight,
		windowWidth,
		statusBarHeight
	}
	// #endif
}
 
export {
	systemInfo
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70

HeadNav.vue

新建组件HeadNav.vue，这是自定义系统导航栏。

/*
* 注意：
* 1、在传入宽度或者高度时，如果是Number数据，传入的值为px大小,无需带单位，组件自动计算
* 2、在使用此导航栏时，建议传入UI规定的导航栏高度，此高度只针对除微信小程序的其他平台有效，微信小程序的导航栏高度，组件自计算
*/
<template>
	<view :style="{height:navHeight+'rpx'}">
		<!-- 微信小程序头部导航栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-head-mod" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}">
			<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
				<view class="wx-head-mod-nav-content"
					:style="{height:customHeight+'rpx',justifyContent:textAlign === 'center'?'center':'left'}">
					<!-- 文本区 -->
					<view class="wx-head-mod-nav-content-mian"
						:style="{width:navTextWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">
						{{textContent}}
					</view>
					<!-- 返回按钮 -->
					<view class="wx-head-mod-nav-content-back" :style="{display:isBackShow?'flex':'none'}"
						@click="backEvent">
						<view class="wx-head-mod-nav-content-back-img"
							:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
							<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
 
		<!-- 除微信小程序之外的其他设备 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="other-head-mod"
			:style="{height:navHeightValue*scaleFactor+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}">
			<view class="other-head-mod-mian"
				:style="{height:navHeightValue*scaleFactor+'rpx',justifyContent:textAlign === 'center'?'center':'left'}">
				<!-- 返回按钮 -->
				<view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent">
					<view class="other-head-mod-mian-back-img"
						:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
						<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<!-- 标题 -->
				<view class="other-head-mod-mian-title" :style="{width:windowWidth - 184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',
					paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',
					fontWeight:fontWeight,color:titleColor}">
					{{textContent}}
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>
 
<script>
	const app = getApp()
	import {systemInfo} from '@/pages/v2/acommon_js/system_info.js'
	export default {
		name: "HeadView",
		props: {
			// 文本区域位置 left：左  center：中  
			textAlign: {
				type: String,
				default: 'center'
			},
			// 文本区内容
			textContent: {
				type: String,
				default: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好还'
			},
			// 文本区离左边的距离
			textPaddingLeft: {
				type: Number,
				default: 16
			},
			// 是否需要返回按钮
			isBackShow: {
				type: Boolean,
				default: true
			},
			// 文本区字体大小
			fontSize: {
				type: Number,
				default: 20 //px
			},
			// 文本区字体粗细
			fontWeight: {
				type: Number,
				default: 700
			},
			// 文本区返回按钮图片宽
			backImageWidth: {
				type: Number,
				default: 12 //px
			},
			// 文本区返回按钮图片高
			backImageHeight: {
				type: Number,
				default: 24 //px
			},
			// 返回按钮图标路径
			backImageUrl: {
				type: String,
				default: '/static/v2/aichat/ai_robot.png'
			},
			// 导航栏整体背景颜色
			navBackgroundColor: {
				type: String,
				default: '#2476F9'
			},
			// 标题字体颜色
			titleColor: {
				type: String,
				default: '#ffffff',
			},
 
			/******** h5端，app端需要传入自定义导航栏高度 *******/
			navHeightValue: {
				type: Number,
				default: 44 //px
			}
		},
		computed: {
			// 文本区宽度
			navTextWidth() {
				if (this.textAlign === 'center') {
					return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'
				} else {
					return this.menubarLeft + 'rpx'
				}
			},
			// 文本区paddingLeft
			textPaddingleft() {
				if (this.textAlign === 'center') {
					return '0'
				} else {
					return this.textPaddingLeft + 'rpx'
				}
			}
		},
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight, //状态栏高度
				navHeight: app.globalData.navHeight, //头部导航栏总体高度
				navigationBarHeight: app.globalData.navigationBarHeight, //导航栏高度
				customHeight: app.globalData.customHeight, //胶囊高度
				scaleFactor: app.globalData.scaleFactor, //比例系数
				menubarLeft: app.globalData.menubarLeft, //胶囊定位的左边left
				windowWidth: app.globalData.windowWidth * app.globalData.scaleFactor
			};
		},
		methods: {
			backEvent() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		created() {
			/* 获取设备信息 */
			const SystemInfomations = systemInfo()
			/* 通用平台 */
			this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
			this.scaleFactor = SystemInfomations.scaleFactor //比例系数
			this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
			this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
			// #endif
			
			console.log("this.navHeight:", this.navHeight)
		}
	}
</script>
 
<style>
	/* #ifdef MP-WEIXIN */
	.wx-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
 
	.wx-head-mod-nav {
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
 
	}
 
	.wx-head-mod-nav-content {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		position: relative;
	}
 
	/* 文本区 */
	.wx-head-mod-nav-content-mian {
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
 
	/* 返回按钮 */
	.wx-head-mod-nav-content-back {
		box-sizing: border-box;
		width: 60rpx;
		height: 100%;
		/* background-color: aqua; */
		position: absolute;
		top: 0;
		left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}
 
	.wx-head-mod-nav-content-back-img {
		box-sizing: border-box;
	}
 
	/* #endif */
 
	/* #ifndef MP-WEIXIN */
	.other-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
 
	.other-head-mod-mian {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
		position: absolute;
		left: 0;
		bottom: 0;
	}
 
	/* 返回按钮 */
	.other-head-mod-mian-back {
		box-sizing: border-box;
		height: 100%;
		width: 60rpx;
		position: absolute;
		left: 32rpx;
		top: 0;
		display: flex;
		align-items: center;
	}
 
	/* 标题 */
	.other-head-mod-mian-title {
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
 
	/* #endif */
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282

index.vue

修改要自定义导航栏的组件

<template>
	<view style="height: 100%;">
		<head-nav :style="navStyle"></head-nav>
		<view class="container" :style="containerStyle">
			<scroll-view :scroll-top="scrollTop" class="chat-container" :scroll-into-view="scrollintoid" scroll-y="true"
				@scroll="handleScroll" @scrolltolower="handleScrollToLower">
			省略中间布局内容
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import HeadNav from '@/pages/v2/components/HeadNav.vue'
	import {systemInfo} from '@/pages/v2/acommon_js/system_info.js'
	export default {
		components: {
			MarkdownViewer,
			HeadNav
		},
		data() {
			return {
				// 省略部分变量
				containerStyle: "",
				navStyle: ""
			};
		},
		onReady() {
			// -------------------------- 经典界面自定义，需要记录-------------------------------------------------------------
			// 设备系统信息
			let systemInfomations_ = uni.getSystemInfoSync()
			// 机型适配比例系数
			let scaleFactor_ = 750 / systemInfomations_.windowWidth
			// 当前机型-屏幕高度
			let windowHeight_ = systemInfomations_.windowHeight * scaleFactor_ //rpx
			
			/* 获取设备信息 */
			const SystemInfomations = systemInfo()
			/* 通用平台 */
			const statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
			const scaleFactor = SystemInfomations.scaleFactor //比例系数
			const windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			const navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
			const navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			const customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			const menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
			this.containerStyle = ' height:' + (systemInfomations_.windowHeight - statusBarHeight - 10) + 'px;';
			// #endif
			
			console.log("this.viewHight:", this.viewHeight)
			
			/* 通用平台 */
			// #ifndef MP-WEIXIN
			this.containerStyle = 'height:' + (systemInfomations_.windowHeight - 54) + 'px;';
			this.navStyle = 'height:' + 44 + 'px';
			// #endif
			// ---------------------------------------------------------------------------------------
	}
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

参考文档

  • https://blog.csdn.net/feifeiyechuan/article/details/131732912
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号