小程序中自定义navigation组件

有时候项目中需要在navigation中展示产品logo等信息，这时候就需要自定义navigation了。但是小程序中如果使用了自定义的navigation ，就默认每个页面的navigation都是自定义的，无法针对单个页面自定义navagation，先说一下思路。

• 在app.js中获取手机屏幕高度、工具栏高度等信息，保存在app.globalData中
• 由于自定义了navigation，页面上的100vh就会比原来变高，所以在navigation组件中要写两部分，一种是自定义的navigation自身，fixed在页面顶部，另一个是与navigation等高度的一个view，用来撑起页面的顶部。

先贴上获取手机屏幕高度的代码：

getSystemInfo: function () {
    wx.getSystemInfo({
        success: function (res) {
            console.log('用户手机型号=====', res)
        }
    })
    const systemInfo = wx.getSystemInfoSync();
    let iphoneX = '';
    if (systemInfo) {
        const { statusBarHeight, model, windowHeight } = systemInfo;
        let totalTopHeight = 68;
        if (model.indexOf('iPhone X') !== -1) {
            totalTopHeight = 94;
            iphoneX = 'iphone-x';
        } else if (model.indexOf('iPhone') !== -1) {
            totalTopHeight = 64;
        } else if (model.indexOf('MI 8') !== -1) {
            totalTopHeight = 88;
        }
        const titleBarHeight = totalTopHeight - statusBarHeight;
        this.globalData.systemInfo = {
            ...systemInfo,
            statusBarHeight,
            titleBarHeight,
            totalTopHeight,
            iphoneX,
            windowHeight,
        };
    }
},

navigation组件wxml部分：

<!-- 随着页面可以下拉的，仅有背景色 -->
<view class="navigation-temp" style="height: {{totalTopHeight}}px; padding-top: {{barHeight}}px; background-color: {{bgColor}}"></view>
<!-- 固定在顶部的真实的导航 -->
<view class="navigation" style="height: {{totalTopHeight}}px; padding-top: {{barHeight}}px; background-color: {{bgColor}}">
    <!-- 没有返回按钮 -->
    <view wx:if="{{showBackButton}}" class="slot" style="top: {{barHeight}}px">
        <slot></slot>
        <image class="logoImage" wx:if="{{isShowLogo}}" style="margin-top: {{logoMargin}}" src="{{logoSrc}}" mode="widthFix" />
    </view>

    <!-- 正常返回按钮 -->
    <block wx:else>
        <view catch:tap="onBack" class="back-btn" hover-class="hover" style="top: {{barHeight}}px" wx:if="{{showBackButton}}">
            <image class="nav-icon" src="{{navIconUrl}}" mode="aspectFit"></image>
        </view>
        <view class="title {{titleClass}}" style='{{navTitleStyle}}'>           <image wx:if="{{isShowLogo}}" class="{{headLogoStyle}}" src="{{logoSrc}}" />
            {{title}}
        </view>
    </block>
</view>

组件JS部分：

//引入app中的变量
const app = getApp();
const { systemInfo } = app.globalData;
const { statusBarHeight } = systemInfo;
const { totalTopHeight } = systemInfo;
const titleBarHeight = systemInfo ? systemInfo.titleBarHeight : 44;
//定义属性
 properties: {
    // 是否展示头部logo
    isShowLogo: {
        type: Boolean,
        value: false,
    },
    // logo图片样式
    headLogoStyle: {
        type: String,
        value: 'width: 186rpx; height: 40rpx;',
    },
    // logo 图片地址
    logoSrc: {
        type: String,
        value: '/imgs/navigation_icon.png',
    },
    //  可传入改变navbar样式
    bgColor: {
        type: String,
        value: '#fff',
    },
    // 文字
    title: {
        type: String,
        value: '页面标题',
    },
    // 高度
    totalTopHeight: {
        type: Number,
        value: totalTopHeight,
    },
    textStyle: {
        type: String,
        value: 'white'
    },
    //  可传入改变nav back页面数
    delta: {
      type: Number,
      value: 1,
    },
    // 是否显示返回按钮
    showBackButton: {
        type: Boolean,
        value: true,
    },
  },
data {
    barHeight: statusBarHeight,
    navIconUrl: config.imgUrl + 'miniapp/imgs/back_icon.png',
    navTitleStyle: 'color: #333;',
    navBgStyle: 'background-color: #fe7f43;',
    logoMargin: (titleBarHeight/2 - 19) + 'px',
},
 methods: {
    onBack() {
          this.triggerEvent('onBack', {});
          const pages = getCurrentPages();
          if (this.data.showBackButton) {
                if (pages.length > 1) {
                      wx.navigateBack({
                            delta: this.data.delta,
                      });
                } else {
                      wx.switchTab({
                            url: '/pages/index/index',
                      });
                }
          }
      }
  },

页面中引用

<navigation showBackButton="{{false}} " isShowLogo="{{true}}" bgColor="{{'#55adff'}}"></navigation>