目录
一、子组件代码
1、完整子组件代码
2、子组件配置项Props
二、父组件引用代码
1 、将头部导航注册成全局组件(main.js)
2、获取设备信息(App.vue)
3、页面导入自定义导航组件
(3-1)、默认配置效果图例
(3-2)、更改配置效果图例
一、子组件代码
1、完整子组件代码
<template>
<view class="header-nav-box"
:style="{'height':Props.imgShow?'':Props.statusBarHeight+'px','background':Props.imgShow?'':Props.bgColor||'#9cf'}">
<!-- 是否使用图片背景 false -->
<image v-if="Props.imgShow||false" :src="imgUrl||'../../static/flower.jpg'" mode="scaleToFill"
style="width: 100%; height: 400rpx;" />
<!-- 导航内容 -->
<view class="nav-box-item" :style="{'top':Props.capsuleTop+'px','color':Props.textColor||'#FFF'}">
<view class="back" v-if="Props.blackShow||true" @click="back">
<uni-icons type="back" size="18" :color="Props.iconColor||'#FFF'" />
<block>{{Props.backText||'返回'}}</block>
</view>
<view class="title">
<block>{{title}}</block>
</view>
</view>
<!-- 自定义内容插槽 -->
<slot name="content"></slot>
</view>
</template>
<script>
export default {
name: "HeaderNav",
data() {
return {};
},
props: {
Props: {
type: Object,
default: () => {}
},
title: {
type: String,
default: '默认标题'
}
},
methods: {
// 返回按钮回调函数
back() {
uni.navigateBack({
data: 1
})
this.$emit('back')
}
}
}
</script>
<style lang="scss">
.header-nav-box {
position: relative;
.nav-box-item {
height: 54rpx;
position: absolute;
display: flex;
align-items: center;
font-size: 34rpx;
width: 100%;
.back {
width: 25%;
padding-left: 10rpx
}
.title {
width: 49%;
text-align: center;
}
}
}
</style>
2、子组件配置项Props
//配置项
Props:{
imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
statusBarHeight: "", //导航高度(动态获取传参)
bgColor: "", //导航栏背景色,不传参则默认#9CF
capsuleTop: "", //胶囊顶部距离(动态获取传参)
textColor: "", //导航标题字体颜色(不传默认#FFF)
iconColor: "", //icon图标颜色(不传默认#FFF)
blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
backText: "", //默认字体(返回)
},
title:"默认标题"//导航标题内容(不传则为默认内容)
大家可根据自身项目的业务进行更改,合理使用,参考写出与自身项目中相符合的写法。也可在配置项中增加自己的想法,或删减自己认为多余的部分,一切根据自己的想法逻辑去实现,我这个只是提供一个自己所理解的参考写法。
二、父组件引用代码
1 、将头部导航注册成全局组件(main.js)
组件名称可自行命名“HeaderNav”
// 注册全局组件
import HeaderNav from "@/components/HeaderNav"
Vue.component("HeaderNav", HeaderNav)
2、获取设备信息(App.vue)
<script>
export default {
globalData: {
statusBarHeight: "", //导航栏高度
capsuleTop: "", //胶囊距离顶部位置
capsuleHeight: "", //胶囊高度
},
onLaunch: function() {
let custom = uni.getMenuButtonBoundingClientRect() //获取右上角胶囊信息
let system = uni.getSystemInfoSync() //获取设备信息
this.globalData.statusBarHeight = system.statusBarHeight + system.safeArea.top
this.globalData.capsuleTop = custom.top
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
3、页面导入自定义导航组件
当前为默认导入子组件(配置项参数为进行任何更改)状态,默认使用背景色#9CF,可自行根据业务需求更改背景色或渐变背景色
<template>
<view id="container">
<HeaderNav :Props="Props" @black="black" />
</view>
</template>
<script>
export default {
data() {
return {
Props: {
imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
statusBarHeight: "", //导航高度(动态获取传参)
bgColor: "", //导航栏背景色,不传参则默认#9CF
capsuleTop: "", //胶囊顶部距离(动态获取传参)
textColor: "", //导航标题字体颜色(不传默认#FFF)
iconColor: "", //icon图标颜色(不传默认#FFF)
blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
backText: "", //默认字体(返回)
}
}
},
onLoad() {
this.Props.statusBarHeight = getApp().globalData.statusBarHeight
this.Props.capsuleTop = getApp().globalData.capsuleTop
},
methods: {
black() {
console.log("返回上一页回调事件");
}
}
}
</script>
<style lang="scss" scoped>
#container {}
</style>
(3-1)、默认配置效果图例
(3-2)、更改配置效果图例
使用背景图头部导航效果 ,仅配置部分参数,剩余参数配置根据需求配置,部分配置项代码如下;
<HeaderNav :title="title" :Props="Props" @black="black" />
title: "我的导航", Props: { imgShow: true, //不传参则默认隐藏状态(false),且使用默认背景色 statusBarHeight: "", //导航高度(动态获取传参) bgColor: "", //导航栏背景色,不传参则默认#9CF capsuleTop: "", //胶囊顶部距离(动态获取传参) textColor: "", //导航标题字体颜色(不传默认#FFF) iconColor: "", //icon图标颜色(不传默认#FFF) blackShow: "", //是否显示返回字体及icon图标(不传默认显示true) backText: "后退", //默认字体(返回) }
文章来源:https://www.toymoban.com/news/detail-771569.html
完成上述步骤,即可得到一个简易的头部导航子组件的封装啦,大家可根据自己项目需求更改,直接copy即可使用,简单易上手。傻瓜式写法!!!各位大佬小声喷哈,哈哈哈哈。文章来源地址https://www.toymoban.com/news/detail-771569.html
到了这里,关于uni-app自定义微信小程序头部导航栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!