unibest框架，自定义导航栏模板

unibest自定义导航栏模板，被群主菲鸽大大点名分享，也是我码生的高光了，马不停蹄前来分享。

我先来两张效果图：

个人倾向于使用微信原生的导航栏但是ui姐姐喜欢增加我的工作量，如果一个项目中需要有多个页面类似的效果我们一是可以封装组件，二是配置模板，在基于unibest这个框架基础来说更合适的就是配置模板，能使实现效果更佳优雅，代码更加简洁，接下来我就分享一下我的实现方法。

强调一下：在写完模板后记得要先把项目重启才能生效！

1.首先我们需要新建一个模板文件customNav.vue在layouts文件夹下面，

作者也在文档中提及了设计思路：

我们主要就是要在这个模板上添加一个导航栏的功能, 废话不多说我直接上模板代码。

  <wd-config-provider :themeVars="themeVars">
    <!-- 导航栏 -->
    <view
      class="fixed-top flex justify-between text-[#f8f8f8] w-10 px-2"
      :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    >
      <!-- 左边返回图标 -->
      <wd-icon @click="back()" name="thin-arrow-left" size="18px" class="w-10" />
      <!-- 导航栏标题 -->
      <slot name="title">标题</slot>
      <!-- 右边展位view -->
      <view class="w-10" />
    </view>

    <!-- 默认插槽-->
    <slot />
  </wd-config-provider>
</template>

<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'
const { safeAreaInsets } = uni.getSystemInfoSync()
const themeVars: ConfigProviderThemeVars = {
  buttonPrimaryBgColor: '#0f7247',
}

const back = () => {
  wx.navigateBack()
}
</script>

<style scoped lang="scss">
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
</style>

默认插槽slot，显示页面的主要内容,

我们在他的上面添加一个导航栏模块，添加一个具名插槽title作为导航栏的标题，

使用flex布局，左中右三块，利用justify-content: space-between实现两端均匀分布，使用fixed定位，实现固定顶部，

到这里我们就完成自定义导航栏布局的模板，现在我们要在页面中使用。

还是回到作者的文档：

我们点进vite-plugin-uni-layouts

插件作者有提到动态布局和额外插槽的使用方法，我们这里需要使用的是额外插槽，我们已经在模板页面上定义好了具名插槽title我们要在页面上使用。

贴代码

{
  layout: false, // 1.禁用页面布局
  style: {
    navigationStyle: 'custom', // 2.使用自定义导航栏
  },
}
</route>

<template>
  <!-- 3.使用内置组件 <uni-layout />, 使用 name 属性指定customNav布局 -->
  <uni-layout name="customNav">
    <!-- 4.导航标题 -->
    <template #title>我的车位</template>
    
    <image mode="widthFix" src="../assets/image/parking.png" class="w-full" />
    
  </uni-layout>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped></style>

根据插件作者在文档中所指示的：

1. 禁用页面布局 layout: false
2. 使用自定义导航栏
3. 使用内置组件
4. 最后我们就可以在页面中使用额外插槽了

由此使我们完成了我们的导航栏布局模板并使用。