uniapp开发小程序自定义导航栏头部
在我们使用uniapp开发小程序时,经常会遇到自定义导航栏的情况,下面我做了俩个情况,一种是全局默认使用一个头部,一种是插槽自定义,用于处理特殊需求
关闭uniapp默认导航栏
在uniapp的pages.json文件进行处理
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"navigationStyle": "custom" // 关闭uniapp默认导航栏
}
}
],
创建一个的自定义导航栏组件
在component组件文件里面创建一个自定义导航栏组件,名字随意,尽量语义化。
<template>
<view class="content">
<!-- 自定义导航栏内容 -->
<view class="" v-if="navShow=='true'" :style="{marginTop:menuTop+'px'}">
<slot></slot>
</view>
<!-- 自定义导航栏默认全局内容 -->
<view class="navSerach" v-else :style="{marginTop:statusBarHeight+'px',height:navigatorHeight+'px'}">
<view class="serach-btn">搜索</view>
</view>
</view>
</template>
<script>
export default {
props: {
navShow: {
typeof: 'string',
default: 'show'
}
},
data() {
return {
title: 'Hello',
statusBarHeight: 0, //状态栏的高度
navigatorHeight: 0, //导航栏高度
menuTop: 0, //胶囊与顶部的距离
}
},
created() {
let res = uni.getSystemInfoSync();
let menu = uni.getMenuButtonBoundingClientRect();
console.log(res, '系统信息');
console.log(menu, '胶囊信息');
// 状态栏高度
this.statusBarHeight = res.statusBarHeight;
// 胶囊距离顶部距离
this.menuTop = menu.top;
//导航栏高度= (胶囊顶部距离-状态栏高度) x 2 + 胶囊的高度
this.navigatorHeight = (menu.top - res.statusBarHeight) * 2 + menu.height;
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.navSerach {
display: flex;
align-items: center;
justify-content: center;
.serach-btn {
padding: 10rpx 20rpx;
background-color: #EFEFEF;
font-size: 28rpx;
width: 240rpx;
border-radius: 40rpx;
display: flex;
justify-content: center;
}
}
</style>
实际效果图
注意:内容根据自己项目需求写,这里只是演示
父页面调用
可以通过父组件传参选择使用全局默认还是自定义插槽。
<template>
<view class="content">
<view class="">
<navBar :navShow="'show'"></navBar>
</view>
</view>
</template>
<script>
import navBar from '@/component/navBar/navBar.vue';
export default {
components: {
navBar
},
data() {
return {
title: 'Hello',
}
},
onLoad() {
},
methods: {
}
}
</script>