HbuilderX写微信小程序自定义顶部导航栏，包含一个搜索框可以实现模糊搜索，兼容适配所有机型，

HBuilderX是DCloud公司推出的一款轻量级、高效的前端开发IDE，它支持快速开发各种移动应用。在开发微信小程序时，可以通过HBuilderX实现自定义的顶部导航栏，并在其中加入搜索框实现模糊搜索功能。

首先，你需要在微信小程序的页面中定义一个自定义组件或者直接在页面的WXML文件中添加一个搜索框控件。对于搜索框的实现，可以使用`<input>`标签，并设置其`type`属性为`search`。然后，通过绑定`bindinput`事件来监听用户的输入行为，从而实现模糊搜索的功能。以下是一个简单的示例代码：

<!-- page.wxml -->
<view class="custom-navbar">
  <input class="search-input" type="search" placeholder="请输入搜索内容" bindinput="onSearchInput" />
</view>

接着，在页面的WXSS文件中添加样式代码，以确保搜索框在所有机型上都能适配和显示良好：

/* page.wxss */
.custom-navbar {
  display: flex;
  align-items: center;
  padding: 10rpx;
  background-color: #f8f8f8;
}

.search-input {
  flex: 1;
  margin-left: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 20rpx;
  padding: 10rpx;
}

最后，在页面的JS文件中实现`onSearchInput`方法，处理模糊搜索的逻辑：

// page.js
Page({
  data: {
    // 可以定义搜索关键字等数据
  },
  onSearchInput: function(event) {
    // 获取用户输入的内容
    const keyword = event.detail.value;
    // 根据关键字进行模糊搜索的逻辑处理
    // ...
  }
});

通过上述步骤，你可以在HBuilderX中为微信小程序添加一个自定义的顶部导航栏，其中包含一个可以实现模糊搜索功能的搜索框，并且确保它在所有机型上都有良好的兼容性和适应性。