微信小程序写一个搜索框
时间: 2023-07-07 12:39:01 浏览: 214
微信小程序搜索框实现
好的,以下是一个简单的微信小程序搜索框的代码示例:
```
<view class="search-box">
<input placeholder="请输入关键字" bindinput="onInput"/>
<button bindtap="onSearch">搜索</button>
</view>
```
其中,`search-box` 是自定义的样式类,可以在样式文件中进行定义。
在对应的js文件中,我们需要定义 `onInput` 和 `onSearch` 函数来处理输入和搜索事件:
```
Page({
data: {
keyword: ''
},
onInput: function(event) {
this.setData({
keyword: event.detail.value
})
},
onSearch: function() {
// 根据关键字进行搜索的具体逻辑
console.log('search for:', this.data.keyword)
}
})
```
在这个例子中,我们通过 `bindinput` 事件捕获用户输入的关键字,然后在 `onSearch` 函数中根据关键字进行搜索。你可以根据实际需求进行修改。
阅读全文