小程序筛选功能带wxss 筛选条件:姓名 年龄 年份 奖励 展示数据:符合条件的人的姓名
时间: 2023-06-13 15:09:17 浏览: 74
好的,首先你需要在 wxml 文件中添加对应的筛选条件,例如:
```html
<!-- 筛选条件 -->
<view class="filter">
<input placeholder="姓名" bindinput="onNameInput"/>
<input placeholder="年龄" bindinput="onAgeInput"/>
<input placeholder="年份" bindinput="onYearInput"/>
<input placeholder="奖励" bindinput="onRewardInput"/>
</view>
<!-- 展示数据 -->
<view class="result">
<block wx:for="{{filteredData}}" wx:key="index">
<text>{{item.name}}</text>
</block>
<block wx:if="{{filteredData.length === 0}}">
<text>暂无数据</text>
</block>
</view>
```
然后在对应的 js 文件中定义筛选条件和对应的筛选方法,例如:
```javascript
Page({
data: {
// 原始数据
originalData: [
{name: '小明', age: 18, year: 2021, reward: '一等奖'},
{name: '小红', age: 20, year: 2021, reward: '二等奖'},
{name: '小刚', age: 22, year: 2020, reward: '三等奖'},
],
// 筛选条件
nameFilter: '',
ageFilter: '',
yearFilter: '',
rewardFilter: '',
},
// 输入姓名时更新筛选条件
onNameInput(e) {
this.setData({
nameFilter: e.detail.value,
})
this.filterData()
},
// 输入年龄时更新筛选条件
onAgeInput(e) {
this.setData({
ageFilter: e.detail.value,
})
this.filterData()
},
// 输入年份时更新筛选条件
onYearInput(e) {
this.setData({
yearFilter: e.detail.value,
})
this.filterData()
},
// 输入奖励时更新筛选条件
onRewardInput(e) {
this.setData({
rewardFilter: e.detail.value,
})
this.filterData()
},
// 筛选数据
filterData() {
const { originalData, nameFilter, ageFilter, yearFilter, rewardFilter } = this.data
const filteredData = originalData.filter(item => {
return item.name.includes(nameFilter) &&
(ageFilter === '' || item.age === parseInt(ageFilter)) &&
(yearFilter === '' || item.year === parseInt(yearFilter)) &&
item.reward.includes(rewardFilter)
})
this.setData({
filteredData,
})
},
})
```
最后在 wxss 文件中添加样式,例如:
```css
.filter {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.result {
margin-top: 10px;
}
.result text {
display: block;
margin-bottom: 5px;
}
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![application/x-dosexec](https://img-home.csdnimg.cn/images/20210720083343.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)