微信小程序自定义搜索导航

微信小程序自定义搜索导航可以通过以下步骤实现：

1. 在小程序的json文件中添加一个搜索框组件和一个导航栏组件，如下所示：

{
  "navigationBarTitleText": "搜索",
  "usingComponents": {
    "search-box": "/components/search-box/search-box",
    "nav-bar": "/components/nav-bar/nav-bar"
  },
  "enablePullDownRefresh": true
}

2. 在search-box组件中添加一个输入框和一个搜索按钮，如下所示：

<view class="search-box">
  <input class="search-input" placeholder="请输入搜索关键字" bindinput="inputChange"/>
  <button class="search-btn" bindtap="search">搜索</button>
</view>

3. 在nav-bar组件中添加导航栏按钮，并在点击事件中跳转到对应页面，如下所示：

<view class="nav-bar">
  <view class="nav-btn" bindtap="goHome">首页</view>
  <view class="nav-btn" bindtap="goList">列表页</view>
  <view class="nav-btn" bindtap="goProfile">个人中心</view>
</view>

Component({
  methods: {
    goHome() {
      wx.navigateTo({
        url: '/pages/home/home'
      })
    },
    goList() {
      wx.navigateTo({
        url: '/pages/list/list'
      })
    },
    goProfile() {
      wx.navigateTo({
        url: '/pages/profile/profile'
      })
    }
  }
})

4. 在search-box组件的js文件中添加输入框输入事件和搜索按钮点击事件，将输入框的值传递给父组件，如下所示：

Component({
  methods: {
    inputChange(e) {
      this.triggerEvent('inputchange', e.detail.value);
    },
    search() {
      this.triggerEvent('search');
    }
  }
})

5. 在父组件中监听search-box组件的输入框输入事件和搜索按钮点击事件，根据输入框的值进行搜索，并跳转到相应的页面，如下所示：

<search-box bind:inputchange="onInputChange" bind:search="onSearch"></search-box>
<nav-bar></nav-bar>

Page({
  data: {
    keyword: ''
  },
  onInputChange(e) {
    this.setData({
      keyword: e.detail
    });
  },
  onSearch() {
    // 根据输入框的值进行搜索，并跳转到相应的页面
    wx.navigateTo({
      url: '/pages/search-result/search-result?keyword=' + this.data.keyword
    })
  }
})

以上就是微信小程序自定义搜索导航的实现步骤。