uniapp vue3自定义头部加搜索框

### 实现 UniApp Vue3 自定义导航栏带搜索框的功能 在 UniApp 中使用 Vue3 实现自定义导航栏并添加搜索框，可以通过以下方式实现。首先需要了解 UniApp 的 `custom-nav` 自定义导航栏组件，并结合 Vue3 的语法特性完成功能开发[^1]。 以下是完整的代码示例： ```vue <template> <view class="custom-navbar"> <!-- 自定义导航栏 --> <view class="navbar" :style="{ height: `${statusBarHeight + navBarHeight}px` }"> <view class="left-area"> <button @click="goBack">返回</button> </view> <view class="center-area"> <input type="text" v-model="searchText" placeholder="请输入搜索内容" class="search-input" /> </view> <view class="right-area"> <button @click="startSearch">搜索</button> </view> </view> <!-- 页面主体 --> <view class="content"> <slot></slot> </view> </view> </template> <script setup> import { ref, computed } from "vue"; import { useStore } from "pinia"; // 获取胶囊位置信息 const store = useStore(); const capsuleTop = store.capsuleTop; // 动态计算状态栏高度和导航栏高度 const statusBarHeight = uni.getSystemInfoSync().statusBarHeight; const navBarHeight = capsuleTop - statusBarHeight + 50; // 根据胶囊高度调整 // 搜索框绑定值 const searchText = ref(""); // 返回按钮逻辑 const goBack = () => { uni.navigateBack(); }; // 搜索按钮逻辑 const startSearch = () => { console.log("搜索内容:", searchText.value); }; </script> <style scoped> .custom-navbar { display: flex; flex-direction: column; } .navbar { display: flex; align-items: center; justify-content: space-between; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .left-area, .right-area { padding: 0 16px; } .center-area { flex: 1; text-align: center; } .search-input { width: 80%; height: 36px; padding: 0 12px; border: 1px solid #ccc; border-radius: 20px; font-size: 14px; } .content { flex: 1; padding-top: 16px; } </style> ``` #### 说明 1. **动态计算导航栏高度** 使用 `uni.getSystemInfoSync()` 获取设备的状态栏高度，并结合胶囊位置信息动态计算导航栏的高度[^2]。 2. **Pinia 状态管理** 在 `main.js` 中引入 Pinia 并初始化，通过 Pinia 存储胶囊的 `top` 值以便全局使用[^2]。 3. **返回与搜索功能** 提供返回按钮和搜索按钮的基本交互逻辑，分别调用 `uni.navigateBack()` 和输出搜索内容。 4. **样式布局** 使用 Flexbox 布局实现导航栏的左右居中对齐效果，并为搜索框设置圆角边框以提升美观性。 ---