uniapp自定义导航，全端兼容

我们在用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  MP
uni.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>

原文地址：https://blog.csdn.net/qq_33323469/article/details/142762257

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！