微信小程序taro使用nutui自定义Navbar

微信小程序taro使用nutui自定义Navbar

在app.config.ts添加navigationStyle属性，配置如下

window: {
    ...
    navigationStyle: "custom",//自定义navBar 
  }

在需要的页面添加nut-navbar组件，代码如下

<nut-navbar
    fixed
    placeholder
    safe-area-inset-top
    :title="title"
    :left-text="leftText"
    :right-text="rightText"
    :style="navbarStyle"
    @on-click-back="onClickBack"
    @on-click-title="onClickTitle"
    @on-click-right="onClickRight"
  />

在src添加目录utils,添加代码useNavigationBar.ts

import { getSystemInfoSync, getMenuButtonBoundingClientRect } from '@tarojs/taro'

interface NavigateBarInfoProps {
  navBar: {
    height: number
    top: number
    py: number
    px: number
  }
  menuInfo: ReturnType<typeof getMenuButtonBoundingClientRect> | null
}

let navigateBarInfo: NavigateBarInfoProps = {
  navBar: { top: 0, height: 0, py: 0, px: 0 },
  menuInfo: null
}

export const useNavigationBar = () => {
  const initNavigationBar = () => {
    const systemInfo = getSystemInfoSync()
    // console.log('systemInfo打印：'+JSON.stringify(systemInfo))
    const menuButtonInfo = getMenuButtonBoundingClientRect()
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    const statusBarHeight = systemInfo.statusBarHeight ?? 44
    // 状态栏到胶囊的间距
    const menuButtonStatusBarGap = menuButtonInfo.top - statusBarHeight
    const navBarHeight = menuButtonStatusBarGap * 2 + menuButtonInfo.height + statusBarHeight
    const navBarTop = statusBarHeight
    const paddingX = systemInfo.screenWidth - menuButtonInfo.right
    navigateBarInfo = {
      navBar: {
        height: navBarHeight,
        top: navBarTop,
        py: menuButtonStatusBarGap,
        px: paddingX
      },
      menuInfo: menuButtonInfo
    }
    console.log('计算后的navigateBarInfo对象：'+JSON.stringify(navigateBarInfo))
  }

  return {
    navigateBarInfo,
    initNavigationBar
  }
}

app.ts添加，执行initNavigationBar，代码如下

import { createApp } from 'vue'
import { useNavigationBar } from './utils/useNavigationBar';
import './app.scss'

const { initNavigationBar } = useNavigationBar()

const App = createApp({
  onLaunch () {
    console.log('App is onLaunch:');
    initNavigationBar()
  },
  onShow (options) {
    console.log('App is shown:', options);
  },
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
  
})
export default App

使用Navbar添加ts代码，如下：

<script setup lang="ts">
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { useNavigationBar } from '../../utils/useNavigationBar';
const { navigateBarInfo } = useNavigationBar();

const title = ref('标题')
const leftText = ref('返回')
const rightText = ref('按钮')

const onClickBack = () => {
  console.log('点击返回')
}

const onClickTitle = () => {
  console.log('点击标题')
}

const onClickRight = () => {
  console.log('点击右侧按钮')
}

const navbarStyle = computed(() => {
  return {
        height: `${navigateBarInfo.navBar.height}px`,
        paddingTop: `${navigateBarInfo.navBar.top}px`,
        paddingLeft: `${navigateBarInfo.navBar.px}px`,
        paddingRight: `${navigateBarInfo.navBar.px}px`
      }
})
</script>

fixed属性 是否固定到顶部,
placeholder固定在顶部时，是否在标签位置生成一个等高的占位元素
safe-area-inset-top,是否开启顶部安全区适配
Tabbar也有些属性最好也配置下
谈谈优劣：
自定义Navbar在微信开发者环境模拟效果与真机效果并不一致，对开发可能会带来些麻烦，当然在程序体验上可能会有些好的体验
所以建议不要对全局的navigationStyle进行设置，而是对特有的一些页面进行设置，哪个页面使用就在哪个页面的index.config.ts设置，例如：

export default definePageConfig({
  navigationBarTitleText: '首页',
  navigationStyle: "custom",//自定义navBar 
})