uniapp导航栏中间按钮

UniApp是一款基于 Vue.js 开发的跨平台框架，用于构建同时运行在微信小程序、H5、iOS、Android 等多种平台的应用。关于 UniApp 导航栏中间按钮，它通常位于导航栏的中心位置，可以自定义显示内容，比如常见的“搜索”、“更多”等。这个按钮的功能可以根据应用设计需求进行配置，点击事件可以通过 Vue 的 `methods` 或者响应式数据绑定来处理。

要设置导航栏中间按钮，你可以按照以下步骤操作：

1. 首先，在 `.vue` 文件的 `<template>` 标签内，添加 `<uni-navbar>` 组件，并指定 `mode` 属性为 "custom" 以启用自定义模式：

   <uni-navbar mode="custom">
     <!-- 左侧按钮 -->
     <uni-left-item>...</uni-left-item>
     <!-- 中间按钮 -->
     <uni-middle-item v-if="showMiddleButton">我的</uni-middle-item>
     <!-- 右侧按钮 -->
     <uni-right-item>...</uni-right-item>
   </uni-navbar>

2. 使用 `v-if` 指令控制中间按钮的显示，例如 `showMiddleButton` 是一个布尔值：

   <uni-middle-item v-if="showMiddleButton">{{ buttonText }}</uni-middle-item>

并在相应的 `data` 或 `computed` 内部设置 `showMiddleButton` 和 `buttonText`。

3. 添加点击事件监听器，以便在用户点击时执行相应逻辑：

   data() {
     return {
       showMiddleButton: true,
       buttonText: '搜索'
     }
   },
   methods: {
     handleMiddleButtonClick() {
       // 处理点击事件的逻辑...
     }
   }