微信小程序中實現(xiàn)自定義Navbar方法詳解

更新時間：2024年05月04日 11:35:56 作者：零一行者

這篇文章主要介紹了微信小程序中實現(xiàn)自定義Navbar方法,Navbar由 StatusBar和TitleBar組成,只需要知道它們各自的高度,就可以很好地完成自定義,需要的朋友可以參考下

前言

自定義 navbar 應該是很常見的需求。要自定義一個 navbar 并不難，只需要了解其組成部分即可。

從上面的圖片可以看出，Navbar 由 StatusBar 和 TitleBar 組成。了解了這些組成部分之后，只需要知道它們各自的高度，就可以很好地完成自定義。

StatusBar高度

狀態(tài)欄高度與設備（即操作系統(tǒng)）有關。在 uniapp 中，提供了一個名為 getSystemInfoSync 的方法，可以同步獲取與設備相關的內(nèi)容。

const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;

TitleBar高度

通常，設備按照系統(tǒng)被劃分為 Android 和 iOS，這種分類方式在行業(yè)內(nèi)是一種通用的標準，雖然個別廠商可能會有一些細微的差異，但這里我們只關注通用標準。

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>