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

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

这篇文章主要介绍了微信小程序中实现自定义Navbar方法,Navbar由 StatusBar和TitleBar组成,只需要知道它们各自的高度,就可以很好地完成自定义,需要的朋友可以参考下

前言

自定义 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>

最终效果

以上就是微信小程序中实现自定义Navbar方法详解的详细内容，更多关于小程序自定义Navbar的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

微信小程序登录数据解密及状态维持实例详解
这篇文章主要介绍了微信小程序登录数据解密及状态维持,结合实例形式分析了微信小程序解密敏感信息及获取session保持登陆状态的相关操作技巧,需要的朋友可以参考下
2019-05-05
JavaScript数组去重的五种方法及其他细节和拓展
JavaScript数组去重这个问题,经常出现在面试题中,下面这篇文章主要给大家介绍了关于JavaScript数组去重的五种方法及其他细节和拓展的相关资料,文中通过实例代码以及图文介绍的非常详细,需要的朋友可以参考下
2022-12-12
js jquery 获取某一元素到浏览器顶端的距离实现方法
今天小编就为大家分享一篇js jquery 获取某一元素到浏览器顶端的距离实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片
2012-12-12
微信小程序实现自定义底部导航
这篇文章主要为大家详细介绍了微信小程序实现自定义底部导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript实现时间范围效果
这篇文章主要为大家详细介绍了JavaScript实现时间范围效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
JS实现简单的二维矩阵乘积运算
这篇文章主要介绍了JS实现简单的二维矩阵乘积运算方法,涉及JavaScript基于数组操作实现矩阵运算的功能,需要的朋友可以参考下
2016-01-01
javascript中createElement的两种创建方式
这篇文章主要介绍了javascript中createElement的两种创建方式,具有一定参考借鉴价值,需要的朋友可以参考下
2015-05-05
javascript中字符串拼接需注意的问题
作为一名.net开发人员相信大家都知道C#中字符串拼接与StringBuilder的效率差距。
2010-07-07
小程序自定义索引菜单
这篇文章主要为大家详细介绍了小程序自定义索引菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07