微信小程序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
})