微信小程序打夯之旅（九）- 自定义导航栏

前述

文末贴了自定义导航栏的源代码，不想看分析的可以直接到最后提取。

自定义导航栏的核心问题

• 自定义导航栏的高度如何计算？
• 如何控制返回按钮？
• 如何最小化影响页面其他逻辑（解耦）？
• 如何做到配置化？

理想的组件使用方式

// 仅需要传入导航栏的标题
<navigation title="自定义导航栏"></navigation>

// 支持导航栏样式配置化
<navigation title="自定义导航栏" titleColor="white" backgroundColor="none"></navigation>

导航栏高度的动态计算

自定义导航栏高度可以拆解成系统导航栏的高度 + 小程序导航栏的高度，其中系统导航栏高度可以通过 API 获取，小程序导航栏高度默认为 50px

// 根据不同机型动态计算导航栏理想高度
computeHeight() {
  wx.getSystemInfo({
    success: (res) => {
      this.setData({
        statusBarHeight: res.statusBarHeight,
        navigationBarHeight: 50 + res.statusBarHeight,
      });
    },
  });
}

返回按钮的动态控制

核心逻辑：当页面堆栈超过1时，则显示返回按钮，否则不显示。

ready() {
    this.setData({ showBack: getCurrentPages().length > 1 });
}

返回事件拦截

有时候需要拦截返回来处理一些逻辑，比如弹出挽留弹窗等，则可以阻止默认的返回事件

// 外部组件使用
<navigation title="拦截返回" noBack bindback="onBack"/>

// 组件内部返回事件逻辑
back() {
  if (getCurrentPages().length > 0 && !this.data.noBack) {
    getCurrentPages().length > 1 && wx.navigateBack();
  } else {
    this.triggerEvent('back')
  }
}

双击逻辑

在某些场景下，双击导航栏需要返回顶部或者进行刷新

// 点击导航栏，进入双击逻辑判断
onClick(e) {
  if (this.data.clickNum === 0) {
    this.setData({
      clickNum: 1,
      clickTimer: setTimeout(() => {
        this.resetClick()
      }, 300)
    });
  } else {
    this.triggerEvent('doubleClick');
    this.resetClick();
  }
},

resetClick() {
  clearTimeout(this.data.clickTimer)
  this.setData({
    clickNum: 0,
    clickTimer: null
  });
}

源代码

navigation.json

{
  "component": true
}

navigation.wxml，其中返回图标和首页图标未提供

<!-- 导航栏占位符，高度与导航栏高度一致 -->
<view
  class="placeholder"
  wx:if="{{placeholder}}"
  style="height: {{navigationBarHeight}}px;"/>

<!-- 导航栏 -->
<view
  bindtap="onClick"
  class="navigation-wrap"
  style="color: {{titleColor}};height: {{navigationBarHeight}}px;line-height:{{navigationBarLineHeight}}px;background: {{backgroundColor}};"
>
  <!-- 返回按钮 -->
  <view class="back-wrap" catchtap="back">
    <image
      wx:if="{{showBack}}"
      src="/assets/images/navigation/navigation-back-{{titleColor == 'white' ? 'white' : 'black'}}.svg" />
    <image
      class="icon-home"
      wx:if="{{!showBack && showHome}}"
      src="/assets/images/navigation/navigation-home-{{titleColor == 'white' ? 'white' : 'black'}}.svg" />
  </view>

  <!-- 导航栏标题 -->
  <view class="title">{{title}}</view>

  <!-- 导航栏右边返回按钮占位符，宽度与返回按钮宽度一致 -->
  <view class="back-wrap back-slot"></view>
</view>

navigation.js

Component({
  properties: {
    title: { /* 标题 */ type: String, value: '' },
    titleColor: { /* 标题颜色 */  type: String, value: 'black' },
    noBack: { /* 是否拦截返回 */  type: Boolean, value: false },
    showHome: { /* 是否显示首页按钮 */ type: Boolean, value: false },
    backgroundColor: { /* 背景 */ type: String, value: '#ffffff' },
    placeholder: { /* 是否需要占位 */ type: Boolean, value: true },
  },
  data: {
    showBack: false,                      // 是否显示返回按钮
    statusBarHeight: 0,                   // 顶部系统状态条高度
    navigationBarHeight: 0,               // 导航栏高度
    navigationBarLineHeight: 0,           // 导航栏行高
    navigationBarBackgroundHeight: 0,     // 导航栏背景高度
    clickNum: 0,
    clickTimer: null,
  },
  ready() {
    this.computeHeight();
    this.setData({ showBack: getCurrentPages().length > 1 });
  },
  methods: {
    // 点击返回按钮，默认返回上一页，如果返回被拦截则只上报一个back事件
    back() {
      if (getCurrentPages().length > 0 && !this.data.noBack) {
        getCurrentPages().length > 1 && wx.navigateBack();
      } else {
        this.triggerEvent('back')
      }
    },

    // 根据不同机型动态计算导航栏理想高度
    computeHeight() {
      wx.getSystemInfo({
        success: (res) => {
          this.setData({
            statusBarHeight: res.statusBarHeight,
            navigationBarHeight: 50 + res.statusBarHeight,
            navigationBarLineHeight: 44 + res.statusBarHeight * 2,
          });
          this.triggerEvent('updateNavigationHeight', this.data.navigationBarHeight);
          this.triggerEvent('updateStatusBarHeight', this.data.statusBarHeight);
        },
      });
    },

    // 点击导航栏，进入双击逻辑判断
    onClick(e) {
      if (this.data.clickNum === 0) {
        this.setData({
          clickNum: 1,
          clickTimer: setTimeout(() => {
            this.resetClick()
          }, 300)
        });
      } else {
        this.triggerEvent('doubleClick');
        this.resetClick();
      }
    },

    resetClick() {
      clearTimeout(this.data.clickTimer)
      this.setData({
        clickNum: 0,
        clickTimer: null
      });
    },
  },
});

navigation.wxss

<style lang="scss">
.placeholder {
  width: 100%;
}
.navigation-wrap {
  background: white;
  text-align: center;
  font-size: 36rpx;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;

  .back-wrap {
    text-align: left;
    padding-left: 32rpx;
    box-sizing: border-box;
    width: 80rpx;
    height: 100%;

    image {
      width: 16rpx;
      height: 28rpx;
    }
    .icon-home {
      width: 40rpx;
      height: 36rpx;
    }
  }

  .title {
    flex: 1;
    height: 100%;
    padding:0 60px;
    overflow:hidden;
    display:-webkit-box;
    word-break:break-all;
    -webkit-line-clamp: 1;
    text-overflow:ellipsis;
    -webkit-box-orient: vertical;
  }
}
</style>

组件使用案例

<!-- 基础用法 -->
<navigation title="自定义导航栏"/>

<!-- 透明背景 + 不占任何空间 -->
<navigation title="自定义导航栏" backgroundColor="none" placeholder="{{false}}"/>

<!-- 黑夜模式：白色标题 + 黑色背景 -->
<navigation title="自定义导航栏" titleColor="#FFFFFF" backgroundColor="#000000"/>

<!-- 拦截返回事件 -->
<navigation title="自定义导航栏" noback bindback="onBack"/>

<!-- 显示首页图标 -->
<navigatoin title="自定义导航栏" showHome/>

<!-- 双击刷新页面 -->
<navigation title="自定义导航栏" binddoubleClick="onRefresh"/>