在小程序中使用picker和搜索框实现一个下拉搜索功能
时间: 2024-02-05 20:13:42 浏览: 31
下面是一个简单的实现方法:
1. 在小程序的wxml文件中添加一个picker组件和一个搜索框组件。
```
<view class="container">
<picker bindchange="pickerChange" value="{{pickerIndex}}" range="{{pickerList}}">
<view class="picker">{{pickerList[pickerIndex]}}</view>
</picker>
<input class="search-input" placeholder="请输入关键词" bindinput="onInput" />
<view class="search-list">
<block wx:for="{{searchResult}}" wx:key="index">
<view class="search-item">{{item}}</view>
</block>
</view>
</view>
```
2. 在小程序的js文件中定义相关数据和方法。
```
Page({
data: {
pickerIndex: 0, // picker选择的索引
pickerList: ['选项1', '选项2', '选项3'], // picker的选项列表
searchResult: [], // 搜索结果列表
dataList: ['数据1', '数据2', '数据3'] // 原始数据列表
},
// picker选择改变时触发
pickerChange(e) {
this.setData({
pickerIndex: e.detail.value
})
},
// 输入框输入内容改变时触发
onInput(e) {
const keyword = e.detail.value.trim().toLowerCase()
const searchResult = []
this.data.dataList.forEach(item => {
if (item.toLowerCase().includes(keyword)) {
searchResult.push(item)
}
})
this.setData({
searchResult
})
}
})
```
3. 在小程序的wxss文件中定义样式。
```
.container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20rpx;
}
.picker {
font-size: 28rpx;
color: #333;
padding: 20rpx;
}
.search-input {
width: 90%;
height: 60rpx;
border-radius: 30rpx;
border: 1rpx solid #ddd;
padding: 0 30rpx;
margin: 20rpx 0;
font-size: 28rpx;
}
.search-item {
font-size: 28rpx;
color: #666;
padding: 20rpx;
border-bottom: 1rpx solid #ddd;
}
.search-item:last-child {
border-bottom: none;
}
```
4. 最后,可以根据实际需求对该代码进行完善和调整,以满足具体的功能要求。