uniapp小程序顶部

### 自定义 UniApp 小程序顶部导航栏样式和功能 #### 设置自定义导航栏模式 为了启用自定义导航栏，在 `pages.json` 文件中针对特定页面配置 `"navigationStyle": "custom"` 属性[^3]。 ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationStyle": "custom" } } ``` #### 创建 Header 组件 在小程序项目结构中的 `components` 目录下建立新的组件文件夹，命名为 `header` 或其他合适名称。此组件负责呈现定制化的导航条界面并处理相应逻辑[^1]。 #### 实现 HTML 结构 编辑该组件内的 WXML 文件来构建视觉布局： ```html <view class="nav-bar"> <!-- 左侧返回按钮 --> <image wx:if="{{showBack}}" src="/static/images/back.png" bindtap="handleBack"></image> <!-- 中间标题区 --> <text>{{title}}</text> <!-- 右边操作项 --> <slot name="rightActions"/> </view> ``` #### 添加 CSS 样式 通过 WXSS 定义外观特性，确保与整体设计协调一致： ```css .nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; height: 48px; /* 调整到适合的高度 */ background-color: #fff; } .nav-bar image { width: 24px; height: 24px; } .nav-bar text { font-size: 17px; color: #333; flex-grow: 1; text-align: center; } ``` #### 编写 JavaScript 行为 最后，在 JS 部分编写交互事件处理器和其他业务方法： ```javascript export default { props: ['title', 'showBack'], methods: { handleBack() { uni.navigateBack(); }, } }; ``` #### 使用 Header 组件 回到具体页面的 WXML 文件里引入这个新创建好的 header 组件，并传递必要的参数给它： ```html <template> <view> <comp-header title="我的页面" show-back></comp-header> <!-- 页面主体内容... --> </view> </template> <script> import CompHeader from '@/components/header.vue'; export default { components: {CompHeader}, }; </script> ```