Uniapp自定义导航栏并自适应机型的实现方法

<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>

<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>

<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>