微信小程序怎么写搜索框
时间: 2023-10-13 11:11:18 浏览: 89
在微信小程序中,搜索框可以通过使用 input 组件实现。首先,在你的页面中添加一个 input 组件,代码如下:
```
<view class="search-box">
<input class="search-input" placeholder="请输入搜索关键词" bindinput="onInput" />
<button class="search-btn" bindtap="onSearch">搜索</button>
</view>
```
然后,在对应的页面 JS 文件中,实现两个函数 onInput 和 onSearch:
```
Page({
data: {
keyword: '', // 关键词
},
// 当用户输入时,更新关键词
onInput(e) {
this.setData({ keyword: e.detail.value });
},
// 当用户点击搜索按钮时,执行搜索操作
onSearch() {
wx.showToast({
title: `搜索${this.data.keyword}`,
icon: 'none',
duration: 2000,
});
// 这里可以根据关键词进行搜索操作
},
});
```
以上代码中,关键词存储在页面的 data 中,当用户输入时会触发 onInput 函数,更新 data 中的 keyword;当用户点击搜索按钮时,会触发 onSearch 函数,这里可以根据关键词进行搜索操作,这里我们只弹出一个提示框,告诉用户搜索了什么关键词。