uniapp自定义顶部导航栏

最新推荐文章于 2024-08-06 10:10:57 发布

雷霆半月斩掉你的板砖

最新推荐文章于 2024-08-06 10:10:57 发布

阅读量584

点赞数 2

文章标签：前端 javascript html uniapp

本文链接：https://blog.csdn.net/mxy18851251178/article/details/138079988

版权

本文介绍了如何在uniapp中通过uni.getSystemInfo或uni.getSystemInfoSync获取设备信息，以便设置顶部安全区，并在pages.json中配置自定义导航栏，如设置标题、颜色和位置。

摘要由CSDN通过智能技术生成

首先uniapp获取设备信息：uni.getSystemInfo或uni.getSystemInfoSync，可用于设置顶部安全区

留一个设备安全区的位置哦

然后在pages.json文件里配置自定义导航栏

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "济源市仁新医院",
				"navigationStyle": "custom" //页面使用自定义导航栏属性，微信小程序不给直接修改导航栏字体的大小
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "#fff",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#00DACA",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

<template>
	<view class="">
		<view class="custom-navbar"
			:style="{height:height, backgroundColor: backgroundColor,width:'100%',paddingTop: sysTop + 'px'}">
			<text class="navbar-title" :style="{color: titleColor, fontSize: fontSize  + 'px'}">{{ title }}</text>
		</view>
	</view>
</template>

<script setup>
	export default {
		data() {
			return {
				title: '济源市仁新医院',
				titleColor: '#fff',
				backgroundColor: '#00DACA',
				fontSize: 18,
				height: '100px',
				sysTop: '0'
			}

		},
		onLoad() {
			var that = this;
			let sysInfo = uni.getSystemInfoSync().statusBarHeight;
			console.log(sysInfo);
			that.sysTop = sysInfo
		},
		methods: {

		}
	}
</script>

<style scoped>
	.custom-navbar {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.navbar-title {
		font-weight: 600;
	}
</style>

效果图