请帮我实现一个微信小程序页面的搜索框,搜索框左边的icon是搜索,右边的icon是删除
时间: 2024-02-13 15:04:05 浏览: 25
好的,可以使用小程序提供的`input`组件以及`icon`组件来实现。
首先在页面的`wxml`文件中添加以下代码:
```html
<view class="search-box">
<icon class="search-icon" type="search"></icon>
<input class="search-input" type="text" placeholder="请输入搜索内容" bindinput="onInput" value="{{searchValue}}"/>
<icon class="delete-icon" type="clear" catchtap="onClear"></icon>
</view>
```
其中,`search-box`是包裹整个搜索框的容器,`search-icon`和`delete-icon`是左右两侧的icon,`search-input`是输入框。`searchValue`是一个在data中声明的变量,用来存储输入框中的内容。
然后在`wxss`文件中添加以下样式:
```css
.search-box {
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 20px;
padding: 10rpx;
}
.search-icon {
font-size: 30rpx;
color: #999;
margin-right: 20rpx;
}
.delete-icon {
font-size: 30rpx;
color: #999;
margin-left: 20rpx;
}
.search-input {
flex: 1;
outline: none;
border: none;
font-size: 28rpx;
color: #333;
background-color: #f5f5f5;
}
```
这里设置了搜索框的背景颜色、圆角和内边距,以及左右两侧icon和输入框的样式。
最后在`js`文件中添加以下代码:
```javascript
Page({
data: {
searchValue: '' // 存储搜索框中的内容
},
onInput: function(e) {
this.setData({
searchValue: e.detail.value
})
},
onClear: function() {
this.setData({
searchValue: ''
})
}
})
```
这里定义了两个方法,`onInput`方法用来监听输入框内容的变化,每次输入时都会更新`searchValue`的值;`onClear`方法用来清空输入框的内容,每次点击删除icon时都会触发。
这样就完成了微信小程序页面的搜索框的实现。