微信小程序开发搜索栏怎么写
时间: 2023-06-28 15:05:24 浏览: 54
微信小程序开发搜索栏可以使用 input 组件和相关事件来实现。可以参考以下代码实现:
1. 在 wxml 文件中添加 input 组件
```
<view class="search-container">
<input class="search-input" placeholder="请输入关键字" bindinput="onSearchInput"/>
<button class="search-btn" bindtap="onSearch">搜索</button>
</view>
```
2. 在 js 文件中添加相关事件处理函数
```
Page({
data: {
keyword: '' // 搜索关键字
},
// 监听输入框的输入事件
onSearchInput: function(e) {
this.setData({
keyword: e.detail.value
})
},
// 点击搜索按钮触发的事件
onSearch: function() {
// 根据关键字进行搜索操作
// ...
}
})
```
3. 样式设置
根据自己的需求设置样式即可,如下:
```
.search-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #fff;
}
.search-input {
flex: 1;
height: 60rpx;
border: none;
border-radius: 30rpx;
background-color: #f5f5f5;
padding: 10rpx 20rpx;
font-size: 28rpx;
color: #333;
}
.search-btn {
width: 160rpx;
height: 60rpx;
border: none;
border-radius: 30rpx;
background-color: #007aff;
font-size: 28rpx;
color: #fff;
}
```