微信小程序中实现自定义Navbar方法详解_Javascript

前言

自定义 navbar 应该是很常见的需求。要自定义一个 navbar 并不难，只需要了解其组成部分即可。

从上面的图片可以看出，navbar 由 statusbar 和 titlebar 组成。了解了这些组成部分之后，只需要知道它们各自的高度，就可以很好地完成自定义。

statusbar高度

状态栏高度与设备（即操作系统）有关。在 uniapp 中，提供了一个名为 getsysteminfosync 的方法，可以同步获取与设备相关的内容。

const systeminfo = uni.getsysteminfosync();
const statusbarheight = systeminfo.statusbarheight;

titlebar高度

通常，设备按照系统被划分为 android 和 ios，这种分类方式在行业内是一种通用的标准，虽然个别厂商可能会有一些细微的差异，但这里我们只关注通用标准。

const titlebarheight = systeminfo.platform == 'android' ? 48 : 44;

知道 statusbar 、titlebar 高度之后，接下来定义就很简单了。

编写navbar组件

<template>
  <view class="navbar">
    <!--statusbar-->
    <view
      v-if="showstatusbar"
      class="status-bar"
      :style="{ height: `${statusbarheight}px` }"
    ></view>
    <view class="navbar-content" :style="{ height: `${titlebarheight}px` }">
      <view class="navbar__left" @click="onclickleft">
        <view class="navbar__left-icon">
          <slot name="left"></slot>
        </view>
      </view>
      <view class="navbar__title">
        <slot name="title">
          {{ title }}
        </slot>
      </view>
      <view class="navbar__right" @click="onclickright">
        <view class="navbar__right-icon">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'navbarcomponent',
  props: {
    title: {
      type: string,
      default: '',
    },
    showstatusbar: {
      type: boolean,
      default: true,
    },
  },
  setup(props, { emit, expose }) {
    const systeminfo = uni.getsysteminfosync();
    const statusbarheight = systeminfo.statusbarheight;
    const titlebarheight = systeminfo.platform == 'android' ? 48 : 44;
    const navbarheight = statusbarheight + titlebarheight;
    const getnavbarheight = () => {
      return props.showstatusbar ? navbarheight : titlebarheight;
    };
    const onclickleft = () => {
      emit('clickleft');
    };
    const onclickright = () => {
      emit('clickright');
    };
    expose({
      getnavbarheight,
    });
    return {
      navbarheight,
      titlebarheight,
      statusbarheight,
      onclickleft,
      onclickright,
    };
  },
};
</script>
<style scoped lang="scss">
.navbar {
  padding: 0 20rpx;
  .navbar-content {
    display: flex;
    align-items: center;
  }
  .navbar__title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .navbar__left {
    flex: 0 0 80rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    height: 100%;
    font-size: 28rpx;
  }
  .navbar__right {
    flex: 0 0 80rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    height: 100%;
  }
}
</style>

使用

<template>
  <b-navbar :title="title" @clickleft="onclickleft" @clickright="onclickright">
    <template #left>
      <uni-icons type="left"></uni-icons>
    </template>
  </b-navbar>
</template>
<script>
import { ref } from 'vue';
import bnavbar from '@/components/bnavbar/index.vue';
export default {
  components: {
    bnavbar,
  },
  setup() {
    const title = ref('自定义navbar');
    const onclickleft = () => {
      uni.navigateback();
    };
    const onclickright = () => {
      console.log('clickright');
    };
    return {
      title,
      onclickleft,
      onclickright,
    };
  },
};
</script>
<style scoped lang="scss">
.navbar {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  .navbar__title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .navbar__left {
    flex: 0 0 80rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    height: 100%;
    font-size: 28rpx;
  }
  .navbar__right {
    flex: 0 0 80rpx;
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    height: 100%;
  }
}
</style>