手册版本 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>