在微信小程序中，如果你想要匹配一个包含文字和图标的输入框，你可以使用``组件结合`
```html
placeholder="请输入文字" bindinput="onInputChange" />
```
在上面的代码中，`.input-with-icon`是自定义的样式类，你可以根据需要设置它的样式，比如宽度、高度、边距等。`.icon`是另一个自定义的样式类，用于放置图标。
接下来，你需要在对应的`.js`文件中编写`onInputChange`函数来处理输入框的输入事件：
```javascript
Page（{
data: {
inputValue: ''
},
onInputChange（e） {
this.setData（{
inputValue: e.detail.value
}）；
// 在这里处理输入事件，比如验证输入内容或者发送数据到服务器
}
}）；
```
在这个函数中，你可以获取到用户输入的值，并根据需要进行处理。
如果你想要在输入框弹出时禁止页面滚动，你可以在输入框显示时设置页面的滚动状态，并在输入框隐藏时恢复滚动状态。这可以通过监听输入框的`show`和`hide`事件来实现：
```javascript
Page（{
// ...
onInputShow（） {
wx.pageScrollTo（{
scrollTop: 0,
success: （） => {
wx.setNavigationBarText（{
text: '返回'
}）；
}
}）；
},
onInputHide（） {
wx.pageScrollTo（{
scrollTop: wx.getSystemInfoSync（）.windowHeight,
success: （） => {
wx.setNavigationBarText（{
text: '搜索'
}）；
}
}）；
}
}）；
```
在这个示例中，`onInputShow`函数会在输入框显示时将页面滚动到顶部，并将导航栏的文本设置为“返回”。`onInputHide`函数会在输入框隐藏时将页面滚动到底部，并将导航栏的文本设置为“搜索”。
请注意，这些代码示例可能需要根据你的具体需求进行调整。此外，微信小程序的API和组件可能会随着版本的更新而发生变化，因此请确保你的代码与最新的微信小程序开发文档保持一致。
