用微信开发工具写搜索框
时间: 2023-08-10 07:37:05 浏览: 147
好的,下面是具体的实现步骤:
1. 在 `wxml` 文件中添加以下代码:
```html
<view class="search-box">
<input class="search-input" type="text" placeholder="搜索">
<button class="search-btn">搜索</button>
</view>
```
2. 在 `wxss` 文件中添加以下样式代码:
```css
.search-box {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
margin-top: 20px;
}
.search-input {
flex: 1;
height: 100%;
border: none;
outline: none;
font-size: 14px;
padding: 0 10px;
background-color: #F2F2F2;
border-radius: 20px;
}
.search-btn {
width: 60px;
height: 100%;
margin-left: 10px;
border: none;
outline: none;
background-color: #1AAD19;
color: #FFFFFF;
font-size: 14px;
border-radius: 20px;
}
```
3. 在 `js` 文件中添加以下代码:
```javascript
Page({
// 搜索框输入事件
onSearchInput: function(e) {
console.log('搜索框输入值:', e.detail.value);
},
// 搜索按钮点击事件
onSearchBtnClick: function() {
console.log('搜索按钮点击');
}
})
```
4. 给搜索框和搜索按钮绑定事件,修改 `wxml` 文件中的代码:
```html
<view class="search-box">
<input class="search-input" type="text" placeholder="搜索" bindinput="onSearchInput">
<button class="search-btn" bindtap="onSearchBtnClick">搜索</button>
</view>
```
这样,一个简单的搜索框就完成了。你可以在 `onSearchInput` 和 `onSearchBtnClick` 函数中添加自己的逻辑代码,实现搜索功能。