基于uniapp 开发小程序确实速度快一些，下面是实现简易沉浸式导航组件
只包含基础样式，标题插槽，返回按钮等功能，如需要更精准控制胶囊位置等需配合getMenuButtonBoundingClientRect 方法再做优化
效果展示
image.png
实现方法
<template>
<!-- 自定义状态栏 -->
<view>
<view class="statu-bar-area" :style="{height:statusBarStyle.height}"></view>
<view class="nav-area">
<view class="nav-left" hover-class="active-hover">
<uni-icons type="back" size="26" @click="onBack" v-if="pages.length>1"></uni-icons>
</view>
<view class="nav-middle">
<slot name="default" >
<!-- 测试导航内容 -->
</slot>
</view>
<view class="nav-right"></view>
</view>
</view>
</template>
<script>
export default {
name: "custom-nav-bar",
data() {
return {
windowInfo: {},
pages: []
};
},
computed: {
statusBarStyle() {
return {
height: (this.windowInfo.statusBarHeight || 0) + 'px'
}
}
},
beforeMount() {
this.windowInfo = uni.getWindowInfo()
this.pages = getCurrentPages();
},
methods: {
onBack() {
uni.navigateBack()
}
}
}
</script>
<style scoped lang="scss">
.nav-area {
height: 88rpx;
display: flex;
align-items: center;
justify-content: space-between;
color: #222222;
.nav-left {
width: 200rpx;
display: flex;
align-items: center;
padding-left: 16rpx;
}
.nav-right {
width: 200rpx;
}
.nav-middle {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
align-items: center;
justify-content: center;
text-align: center;
}
}
</style>
