uni-app实现搜索框

在UniApp中实现顶部导航栏的搜索框，你可以按照以下步骤操作：

1. **添加搜索框组件**: 在`.vue`文件的模板部分，引入`u-navbar`组件，并在其子元素中添加`u-navbar-search`来创建搜索框。

<template>
  <view>
    <u-navbar>
      <u-navbar-item :index="0" @click="onNavigationBarButtonTap">按钮1</u-navbar-item>
      <!-- 添加搜索框 -->
      <u-navbar-search placeholder="请输入搜索关键词" v-model="searchText" @search-input-changed="onNavigationBarSearchInputChanged"></u-navbar-search>
      <u-navbar-item :index="1" @click="handleNewInfo">按钮2</u-navbar-item>
    </u-navbar>
  </view>
</template>

2. **绑定事件处理器**: 在`data`里声明`searchText`用于存储搜索框的输入内容，并在`methods`中定义`onNavigationBarSearchInputChanged`和`handleNewInfo`函数。

export default {
  data() {
    return {
      searchText: '',
    };
  },
  methods: {
    // ...其他方法
    onNavigationBarButtonTap(e) {
      if (e.index === 0) {
        this.$u.showToast('界面刷新');
      } else if (e.index === 1) {
        this.navigateTo('/pages/sysy/tssy');
      }
    },
    onNavigationBarSearchInputChanged(e) {
      this.$u.showToast(e.text);
    },
    handleNewInfo() {
      uni.navigateTo({
        url: '/pages/sysy/tssy',
      });
    },
  },
};

3. **监听输入变化**: 当用户在搜索框输入时，`onNavigationBarSearchInputChanged`函数会被触发，显示用户输入的内容。

现在，你已经成功地在UniApp中实现了顶部导航栏的搜索框，当用户输入时会弹出提示框显示输入内容，并且可以监听按钮点击事件执行相应的功能。