uni-app h5 单页面自定义头部

侒然

已于 2022-04-28 13:26:03 修改

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

于 2022-04-28 13:24:07 首次发布

本文链接：https://blog.csdn.net/Janent168/article/details/124471838

本文介绍了如何在Pages.json中将导航设置为自定义，并展示了一个页面模板，包括头部固定布局的实现。通过uni.getMenuButtonBoundingClientRect获取顶部信息并调整样式。

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

1.打开 pages.json 将原生的导航设置为false

		{
			"path": "pages/repair/repair",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			},
			"app-plus": {
				//#ifdef H5
				"titleNView": false
				//#endif
			}

		},

2.页面

<template>
	<view class="content">
		<view class="header">
			<view :style="{ height: top }">头部</view>
		</view>
		<div class="container">
			内容
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				height: 0,
			}
		},
		onLoad() {
			const res = uni.getMenuButtonBoundingClientRect()
			console.log(res)
			this.top = res.top + 'px'
			this.height = res.height + 'px'
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.content {
		font-family: PingFang SC;

		.header {
			background-color: #fff;
            height: 44px;
			.nvebar {
				font-size: 38rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>