uni-app 自定义顶部导航栏实现下拉选择功能

在 uni-app 中实现自定义顶部导航栏并添加下拉选择功能，可以通过以下步骤进行。这里我们主要使用 Vue.js 的语法和 uni-app 提供的 API。

1. 自定义顶部导航栏

首先，在 pages.json 中配置页面，关闭默认导航栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

接着，在页面的模板中创建自定义导航栏：

<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left">
        <button @click="backToPrevPage">返回</button>
      </view>
      <view class="navbar-center">
        <text>标题</text>
      </view>
      <view class="navbar-right">
        <picker mode="selector" :range="options" @change="onPickerChange">
          <view class="picker-view">
            <text>{{selectedOption}}</text>
          </view>
        </picker>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

2. 样式定义

在页面的样式文件中定义导航栏样式：

<style>
.container {
  padding-top: 44px; /* 根据导航栏高度调整 */
}

.custom-navbar {
  width: 100%;
  height: 44px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.navbar-left, .navbar-center, .navbar-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.navbar-left button {
  margin-left: 10px;
}

.navbar-right .picker-view {
  width: 100px;
  text-align: center;
}
</style>

3. 数据和方法

在页面的脚本文件中定义数据和事件处理函数：

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedOption: '请选择'
    };
  },
  methods: {
    backToPrevPage() {
      uni.navigateBack();
    },
    onPickerChange(e) {
      this.selectedOption = this.options[e.mp.detail.value];
    }
  }
};
</script>

总结

以上代码展示了如何在 uni-app 中实现一个自定义顶部导航栏，并在右侧添加一个下拉选择器。你可以根据需要进一步调整样式和功能。注意，uni-app 提供了丰富的组件和 API，你可以结合使用它们来构建更复杂的界面。