uniapp中实现自定义的顶部导航栏

先看效果

先获取胶囊按钮的位置数据，并且进行赋值

	import {
		onMounted,
		reactive,
		toRefs
	} from 'vue';
	
	const search_data = reactive({
		S_height: 0, //胶囊按钮的高度
		S_top: 0, //胶囊按钮距离顶部的高度
		Custom_height: 0, //上两个的和
	})
	
	const {
		S_height,
		S_top,
		Custom_height
	} = toRefs(search_data);
	
	function capSule() {
		const but_data = wx.getMenuButtonBoundingClientRect()
		search_data.S_top = but_data.top
		search_data.S_height = but_data.height
		search_data.Custom_height = but_data.top + but_data.height
	};
	
	onMounted(() => {
		capSule();
	});

html代码

<view :style=" 'height:' + Custom_height + 'px;' ">
		<view :style=" 'height:' + S_top + 'px;' "></view>
		<view :style="['height:' + S_height + 'px;', 'line-height:' + S_height + 'px;', 'padding-left:' + '10px']">
			火星移民第一商店</view>
	</view>