手册版本 V6.0

组件介绍

1 在小程序平台，如果使用自定义导航，在头部导航右上角会有一个悬浮按钮，也被称为胶囊按钮。GraceUI 为您提供了胶囊躲避组件，方便开发者布局自定义导航时避开该按钮。
2 在 h5 端和 app 端此组件宽度为 0。

组件名称

gui-mp-navigation-spacing : /GraceUI 组件目录/gui-mp-navigation-spacing.vue

兼容平台

演示代码

<template>
	<gui-page 
	:customHeader="true" 
	:headerClass="['gui-bg-gray', 'gui-dark-bg-level-1']">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view 
			style="height:44px;" 
			class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading 
				@goHome="goHome"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text 
				style="padding:10rpx; margin-left:38rpx" 
				class="gui-h6 gui-blod gui-flex1 gui-ellipsis gui-primary-text">自定义导航主体</text>
				<gui-mp-navigation-spacing></gui-mp-navigation-spacing>
			</view>
		</template>
		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view class="gui-padding">
				<page-demo></page-demo>
			</view>
		</template>
	</gui-page>
</template>
<script>
export default {
	data() {
		return {}
	},
	methods: {
		goHome : function () {
			uni.redirectTo({
				url:'/pages/index/index'
			})
		}
	}
}
</script>
<style scoped>
</style>