uniapp自定义navigationBar

最终效果:

一、关闭默认导航栏

pages.json文件中,对单个页面关闭

"navigationStyle": "custom"

javascript 复制代码
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "控制台",
				"navigationStyle": "custom"
			}
		},
		{
			"path" : "pages/message/message",
			"style" : 
			{
				"navigationBarTitleText" : "消息"
			}
		}
		
	],

二、组件设计

html 复制代码
<template>
	<view>
		<!-- 状态栏占位 -->
		<view :style="{paddingTop: statusBarHeight + 'px'}"></view>
		<!-- 导航栏内容 -->
		<view :style="{height: navBarHeight + 'px'}" class="navBarComponent">
			<view class="navContent">
				<text class="title">{{titles}}</text>
				<view class="right" :style="{width: count*40 + 'px'}" v-if="count > 0" >
					<view class="item" v-for="(item, index) in icons" :key="index">
						<image :src="item.icon" class="imageShow" @click="toPage(item.link)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"navigationBar",
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				count: 0,
				icons: []
			};
		},
		props:{
			titles: String,
			links: Array
		},
		methods: {
			toPage(url){
				uni.navigateTo({
					url:url
				})
			}
		},
		created() {
			// 动态获取手机状态栏高度(电量显示区域),H5没有状态栏,会为0
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifdef H5
			this.navBarHeight = 45
			// #endif
			// #ifndef H5
			this.navBarHeight = this.statusBarHeight + 11
			// #endif
			
			if(typeof this.$props.links === 'undefined'){
				this.count = 0
			}else{
				this.count = this.$props.links.length
				this.icons = this.$props.links
			}
		}
	}
</script>

<style lang="scss">
	.navBarComponent {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		
		.navContent{
			display: flex;
			align-items: center;
			padding-left: 15px;
			padding-right: 15px;
			width: 100%;
			.title{
				font-size: 24px;
				flex: 1;
			}
			.right{
				display: flex;
				width: 120px;
				height: 100%;
				align-items: center;
				justify-content: space-between;
				.item{
					background-color: white;
					width: 36px;
					height: 36px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.imageShow{
						width: 60%;
						height: 60%;
					}
				}
			}
		}
	}
</style>

三、使用

html 复制代码
<navigationBar :titles="'控制台'" :links="icons"></navigationBar>

图标链接数据:

javascript 复制代码
this.icons = [
	{
	    icon: '/static/icon/notify.png',
	    link: '/pages/message/message'
	},
	{
		icon: '/static/icon/scan.png',
		link: '/pages/message/message'
	}
]

不同框架下的语法会有区别

相关推荐
gnip9 分钟前
微前端框架选型
前端·javascript
芒果12519 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~29 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰33 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清34 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu38 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏43 分钟前
React组件中的this指向问题
前端·react.js
passer9811 小时前
列表项切换时同步到可视区域
前端
FogLetter1 小时前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元1 小时前
设计模式-访问者模式
前端·后端·设计模式