我们在用uniapp 开发应用的时候，有的页面需要自定义导航，
1.如果普通的直接使用uni 扩展柜组件的 uni-nav-bar 也基本够用，
2.如果稍微带点自定义的这个值无法支持的，特别在小程序端，胶囊是会压住右边的按钮的
自定义个写 支持插槽
不带插槽的直接使用 自定义值看props里面的
小程序端
h5 app端
1.新建组件 目录结构 components/NavBar.vue
NavBar.vue 文件
<template><view> <view class='navbar' :style="{'backgroundColor':bgcolor,'z-index':zindex}"><view :style="{'height':tops+'px'}"></view><view :style="{'height':height+'px','line-height':height+'px'}"><view class='mainbox' :style="{'width':widtH+'px','height':'100%'}"><slot name="lf" :style="{'height':height+'px'}" v-if='isBack'><view class="nav-bar-lf"><uni-icons :type="licon" size="25" :color="titColor" @click="goBack"></uni-icons></view></slot><slot name="lc" :style="{'height':height+'px','color':titColor}"><view class="nav-bar-lc" :style="{'color':titColor}">{{title}}</view></slot><slot name="lr" :style="{'height':height+'px'}" v-if='isRbtn'><view class="nav-bar-lr"><uni-icons :type="ricon" size="25" :color="titColor" @click="handRbtn"></uni-icons></view></slot></view></view></view></view>
</template>
<script>export default {props: {title: {// 标题文字(默认为空)type: String,default: "",},titColor: {// 标题和返回按钮颜色(默认白色)type: String,default: "#999",},//建议使用background 因为使用backgroundColor，会导致不识别渐变颜色bgcolor: {// 背景颜色type: String,default: "#f4f4f4",},zindex: {// 层级type: Number,default: 1,},isBack: {// 是否显示返回按钮type: Boolean,default: true,},isRbtn: {// 是否显示右边按钮type: Boolean,default: false,},// 图标licon: {// 返回按钮图标type: String,default: "left",},ricon: {// 右边按钮图标type: String,default: "search",},},data() {return {height: '',widtH: '',tops: ''}},created() {// #ifdef MPuni.getSystemInfo({success: (e) => {// 计算安全高度this.tops = e.statusBarHeight;let custom = uni.getMenuButtonBoundingClientRect();// 标题栏高度this.height = custom.height + (custom.top - e.statusBarHeight) * 2;// 计算标题栏减去 胶囊的宽度this.widtH = e.windowWidth - custom.width - 10}})// #endif},methods: {goBack() {uni.navigateBack({delta: 1 // 返回的页面数})},// 搜索handRbtn() {this.$emit("onRight")}}}
</script><style>.navbar {width: 100%;position: fixed;top: 0px;}.mainbox {display: flex;align-items: center;/* #ifdef H5 || APP */height: 45px !important;line-height: 45px;/* #endif */}.nav-bar-lf {width: 45px;height: 100%;text-align: center;}.nav-bar-lc {flex: 1;height: 100%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.nav-bar-lr {width: 50px;height: 100%;text-align: center;}
</style>
页面中使用
index.vue
<template><view><NavBar :isBack='true' :isRbtn='true' title='首页' @onRight="handRight"></NavBar></view>
</template>
<script>// 根据自己的路径import NavBar from "../../../components/NavBar.vue" export default {components: {NavBar},data() {return {}},onLoad() {},methods: {handRight(){console.log("点击右边")}}}
</script><style></style>
带插槽的 ，如果带插槽的 里面样式自己想怎么写怎么写
各端展示如下
代码如下 index.vue
<template><view><NavBar :isBack='true' :isRbtn='true' title='首页' ><template #lf><view class="item1 item">左边</view></template><template #lc><view class="item2 item">标题部分</view></template><template #lr><view class="item3 item">右边</view></template></NavBar></view>
</template>
<script>import NavBar from "../../../components/NavBar.vue"export default {components: {NavBar},data() {return {}},onLoad() {},methods: {}}
</script><style>
.centermain{flex:1;color:#fff;display: flex;align-items: center;
}
.item{flex: 1;background: pink;
}
.item1{flex: 1;background: pink;
}
.item2{flex: 1;background: greenyellow;
}
.item3{flex: 1;background: salmon;
}
</style>
