uniapp 如何自定义导航栏并自适应机型

前言

Uniapp 是一款跨平台开发框架，可以同时开发出可以在多个平台（如微信小程序、H5、App 等）上运行的应用。在开发过程中，我们常常需要自定义导航栏来满足 UI 设计的需求。本文将介绍如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小。

1. 使用 nav-bar 组件自定义导航栏

Uniapp 提供了一个名为 nav-bar 的组件，可以用来自定义导航栏。在页面中引入 nav-bar 组件，并设置相应的样式即可。示例代码如下：

<template>
  <view>
    <nav-bar :title="navTitle" :left-text="navLeftText" :right-text="navRightText" :background-color="navBgColor" :color="navColor"></nav-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navTitle: '自定义导航栏', // 导航栏标题
        navLeftText: '返回', // 左侧文本
        navRightText: '保存', // 右侧文本
        navBgColor: '#ffffff', // 导航栏背景色
        navColor: '#000000' // 导航栏字体颜色
      }
    }
  }
</script>

在上面的示例代码中，我们使用了 nav-bar 组件来自定义导航栏，并设置了导航栏的标题、左侧文本、右侧文本、背景色和字体颜色。这些属性可以根据实际需求进行设置。

2. 动态设置导航栏样式和内容

在实际开发中，我们可能需要根据页面跳转时传递的参数来动态设置导航栏的样式和内容。可以在页面的 onLoad 钩子函数中获取传递的参数，并根据参数来设置导航栏的样式和内容。示例代码如下：

<template>
  <view>
    <nav-bar :title="navTitle" :left-text="navLeftText" :right-text="navRightText" :background-color="navBgColor" :color="navColor"></nav-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navTitle: '', // 导航栏标题
        navLeftText: '', // 左侧文本
        navRightText: '', // 右侧文本
        navBgColor: '#ffffff', // 导航栏背景色
        navColor: '#000000' // 导航栏字体颜色
      }
    },
    onLoad(options) {
      // 获取传递的参数
      const { title, leftText, rightText, bgColor, color } = options
      // 设置导航栏样式和内容
      this.navTitle = title || '自定义导航栏'
      this.navLeftText = leftText || '返回'
      this.navRightText = rightText || '保存'
      this.navBgColor = bgColor || '#ffffff'
      this.navColor = color || '#000000'
    }
  }
</script>

在上面的示例代码中，我们在 onLoad 钩子函数中获取传递的参数，并根据参数来设置导航栏的样式和内容。如果没有传递相应的参数，则使用默认值。这样就可以动态设置导航栏的样式和内容了。

3. 自适应不同机型的屏幕大小

在不同机型的屏幕大小上，导航栏的高度和字体大小可能需要进行调整，以适应不同的屏幕大小。可以使用 uni.getSystemInfo 方法来获取当前设备的屏幕大小，并根据屏幕大小来设置导航栏的高度和字体大小。示例代码如下：

<template>
  <view>
    <nav-bar :title="navTitle" :left-text="navLeftText" :right-text="navRightText" :background-color="navBgColor" :color="navColor" :height="navHeight" :font-size="navFontSize"></nav-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navTitle: '', // 导航栏标题
        navLeftText: '', // 左侧文本
        navRightText: '', // 右侧文本
        navBgColor: '#ffffff', // 导航栏背景色
        navColor: '#000000', // 导航栏字体颜色
        navHeight: '', // 导航栏高度
        navFontSize: '' // 导航栏字体大小
      }
    },
    onLoad(options) {
      // 获取传递的参数
      const { title, leftText, rightText, bgColor, color } = options
      // 设置导航栏样式和内容
      this.navTitle = title || '自定义导航栏'
      this.navLeftText = leftText || '返回'
      this.navRightText = rightText || '保存'
      this.navBgColor = bgColor || '#ffffff'
      this.navColor = color || '#000000'
      // 获取设备信息
      uni.getSystemInfo({
        success: (res) => {
          // 根据设备屏幕大小设置导航栏高度和字体大小
          if (res.platform === 'android') {
            this.navHeight = res.statusBarHeight + 48 + 'px'
            this.navFontSize = '16px'
          } else {
            this.navHeight = res.statusBarHeight + 44 + 'px'
            this.navFontSize = '18px'
          }
        }
      })
    }
  }
</script>

在上面的示例代码中，我们使用 uni.getSystemInfo 方法来获取当前设备的屏幕大小，并根据屏幕大小来设置导航栏的高度和字体大小。在 Android 平台上，导航栏高度为状态栏高度加上 48px，字体大小为 16px；在其他平台上，导航栏高度为状态栏高度加上 44px，字体大小为 18px。这样就可以自适应不同机型的屏幕大小了。

总结

本文介绍了如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小。使用 nav-bar 组件可以方便地自定义导航栏，使用 onLoad 钩子函数可以动态设置导航栏的样式和内容，使用 uni.getSystemInfo 方法可以自适应不同机型的屏幕大小。希望本文对你有所帮助！