【微信小程序】之自定义顶部导航页签

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

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

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>

供参考！