小程序系统提供的导航页签，只能设置字体，却不能自定义字体图片之类的，所以自己写了一个示例。

废话不多说，直接上代码
效果：

app.js

onLaunch: function() {wx.getSystemInfo({success: e => {this.globalData.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();this.globalData.Custom = custom;this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;this.globalData.PageHeight = wx.getSystemInfoSync().windowHeight - this.globalData.CustomBar;}})
}

custom.js

如果你的组件无法使用公共样式，设置如下两个参数即可
addGlobalClass: true,
multipleSlots: true

const app = getApp();
Component({/*** 组件的一些选项*/options: {addGlobalClass: true,multipleSlots: true},/*** 组件的对外属性*/properties: {bgColor: {type: String,default: ''},isCustom: {type: [Boolean, String],default: false},isBack: {type: [Boolean, String],default: false},bgImage: {type: String,default: ''},isType: {type: String,default: ''}},/*** 组件的初始数据*/data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,Custom: app.globalData.Custom},/*** 组件的方法列表*/methods: {BackPage() {// wx.redirectTo({//   url: '/pages/main/home/home',// })wx.navigateBack({detal: 1})},toHome() {var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //当前页面，引用组件的页面if (currPage.data.userType) {wx.reLaunch({url: '/pages/main/share/share',})} else {wx.showModal({title: '提示',content: '请您先授权再使用！',showCancel: false,confirmText: '确认',success: function(res) {if (res.confirm) {// 用户点击了确认} else if (res.cancel) {// 用户点击了取消}}});}}},attached: function() {},ready: function() {},pageLifetimes: {show() {}}
})

custom.json

{"component": true,"usingComponents": {}
}

custom.wxml

<view class="cu-custom" style="height:{{CustomBar}}px"><view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}"><view class="action" bindtap="BackPage" wx:if="{{isBack}}"><text class="icon-back"></text><slot name="backText"></slot></view><view class="action border-custom" wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)"><text class="icon-back" bindtap="BackPage"></text><text class="icon-homefill" bindtap="toHome"></text></view><view class="content" style="top:{{StatusBar}}px"><slot name="content"></slot></view><slot name="right"></slot></view>
</view>

custom.wxss

page {width: 100%;height: 100%;background-color: #f1f1f1;background-color: #FFFFFF;font-size: 28rpx;color: #333;font-family: Helvetica Neue, Helvetica, sans-serif;
}.cu-custom {display: block;position: relative;z-index: 999;
}.cu-custom .cu-bar .content {width: calc(100% - 440rpx);
}.cu-custom .cu-bar {min-height: 0px;padding-right: 200rpx;box-shadow: 0rpx 0rpx 0rpx;
}.cu-custom .cu-bar .content image {height: 60rpx;width: 240rpx;/* height: 45rpx;width: 170rpx; */vertical-align: middle;
}.cu-custom .cu-bar .border-custom {position: relative;background: rgba(0, 0, 0, 0.15);border-radius: 1000rpx;height: 30px;
}.cu-custom .cu-bar .border-custom::after {content: " ";width: 200%;height: 200%;position: absolute;top: 0;left: 0;border-radius: inherit;transform: scale(0.5);transform-origin: 0 0;pointer-events: none;box-sizing: border-box;border: 1rpx solid #fff;opacity: 0.5;
}.cu-custom .cu-bar .border-custom::before {content: " ";width: 1rpx;height: 110%;position: absolute;top: 22.5%;left: 0;right: 0;margin: auto;transform: scale(0.5);transform-origin: 0 0;pointer-events: none;box-sizing: border-box;opacity: 0.6;background-color: #fff;
}.cu-custom .cu-bar .border-custom text {display: block;flex: 1;margin: auto !important;text-align: center;font-size: 34rpx;
}view, scroll-view, swiper, button, input, textarea, label, navigator, image {box-sizing: border-box;
}.text-bold {font-weight: bold;
}.bg-gradual-white {background-color: #fff;color: #000;
}.cu-bar {display: flex;position: relative;align-items: center;min-height: 100rpx;justify-content: space-between;
}.cu-bar.fixed, .nav.fixed {position: fixed;width: 100%;top: 0;z-index: 1024;box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}.cu-bar .content {position: absolute;text-align: center;width: calc(100% - 340rpx);left: 0;right: 0;bottom: 0;top: 0;margin: auto;height: 60rpx;/* font-size: 32rpx; */font-size: 36rpx;line-height: 60rpx;cursor: none;pointer-events: none;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}.cu-custom .cu-bar .content image {height: 60rpx;width: 240rpx;/* height: 45rpx;width: 170rpx; */vertical-align: middle;
}image {max-width: 100%;display: inline-block;position: relative;z-index: 0;
}

页面引用

app.json"usingComponents": {"custom": "/components/custom/custom"
}自己的页面wxml
<custom bgColor="bg-gradual-white text-bold" isBack="{{false}}" isType=""><view slot="content"><image class='title-img' src='/images/title.png'></image></view>
</custom>

供参考！