demo 地址: https://github.com/iotjin/jh-uniapp-demo
uni-app项目中，有时通过
pages.json设置navbar达不到想要的效果，此时需要使用自定义的navbar组件来实现，本项目中的navbar是基于uView的Navbar 进行二次封装
#效果图
用法
pages.json的navigationStyle要设置为custom，然后在需要的页面加nav组件代码
注：实际一个页面只有一个navbar，isFixed是为了demo展示才放出来的属性，一般不加
{
"path": "pages/module3/index",
"style": {
"navigationStyle": "custom", // 使用自定义导航栏
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
}
<view class="text"> 默认样式，左侧返回和标题 </view>
<base-navbar :isFixed="false" title="标题" />
<!-- 自定义右侧solt，rightImg、rightText 失效 -->
<view class="text"> 自定义右侧solt，rightImg、rightText 失效 </view>
<base-navbar :isFixed="false" :title="title" :isBack="false" :rightImg="rightImg" :rightText="rightText">
<u-icon name="chat" size="38" slot="right" @click="clickRightItem"></u-icon>
</base-navbar>
<!-- 右侧图片 -->
<view class="text"> 右侧图片 </view>
<base-navbar :isFixed="false" :title="title" :isBack="false" :rightImg="rightImg" @clickRightItem="clickRightItem" />
<!-- 右侧文字 -->
<view class="text"> 右侧文字 </view>
<base-navbar :isFixed="false" :title="title" :isBack="false" :rightText="rightText" @clickRightItem="clickRightItem" />
<!-- 自定义左侧solt，leftImg、leftText 失效 -->
<view class="text"> 自定义左侧solt，leftImg、leftText 失效 </view>
<base-navbar :isFixed="false" :title="title" :isBack="false">
<u-icon name="chat" size="38" slot="left" @click="clickLeftItem"></u-icon>
</base-navbar>
<!-- 左侧图片 -->
<view class="text"> 左侧图片 </view>
<base-navbar :isFixed="false" :title="title" :isBack="false" :leftImg="leftImg" @clickLeftItem="clickLeftItem" />
<!-- 左侧文字 -->
<view class="text"> 左侧文字 </view>
<base-navbar :isFixed="false" title="标题" :isBack="false" :leftText="leftText" @clickLeftItem="clickLeftItem" />
全部代码
<template>
<view>
<u-navbar :is-back="isBack" :back-icon-color="backColor" :title="title" :title-color="titleColor" :background="background" :is-fixed="isFixed">
<template v-if="$slots.left">
<slot name="left"></slot>
</template>
<template v-else-if="leftImg">
<image class="nav-item-img" :src="leftImg" @click="onClickNavLeftItem"></image>
</template>
<template v-else-if="leftText">
<view class="nav-item-text" @click="onClickNavLeftItem">{
{
leftText}}</view>
</template>
<template v-if="$slots.right" slot="right">
<slot name="right"></slot>
</template>
<template v-else-if="rightImg" slot="right">
<image class="nav-item-img" :src="rightImg" @click="onClickNavRightItem"></image>
</template>
<template v-else-if="rightText" slot="right">
<view class="nav-item-text" @click="onClickNavRightItem">{
{
rightText}}</view>
</template>
</u-navbar>
</view>
</template>
<script>
export default {
name: "base-navbar",
props: {
// 是否显示返回按钮，默认为true
isBack: {
type: Boolean, default: true },
title: {
type: String, default: '' },
// 右侧图片地址，优先级高于rightText，低于右侧slot
rightImg: {
type: String, default: '' },
rightText: {
type: String, default: '' },
// 左侧图片地址，优先级高于leftText，低于左侧slot
leftImg: {
type: String, default: '' },
leftText: {
type: String, default: '' },
isFixed: {
type: Boolean, default: true },
},
data() {
return {
backColor: "white",
titleColor: "white",
background: {
// backgroundColor: '#38BC9D',
// // 导航栏背景图
// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
// // 还可以设置背景图size属性
// backgroundSize: 'cover',
// 渐变色
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
}
};
},
methods: {
onClickNavLeftItem() {
this.$emit("clickLeftItem", {
});
},
onClickNavRightItem() {
this.$emit("clickRightItem", {
});
}
}
}
</script>
<style>
.nav-item-text {
color: white;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-item-img {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
</style>