在微信小程序中实现多条件筛选页面，通常需要以下几个步骤：
1. **设计筛选条件的UI界面**：使用`<picker>`、`<checkbox>`、`<input>`等组件来让用户选择或输入筛选条件。
2. **管理筛选状态**：使用`data`来存储用户选择的筛选条件。
3. **处理筛选逻辑**：根据用户选择的条件，向后端请求数据或在前端过滤数据。
4. **展示筛选结果**：将筛选后的数据显示在页面上。
下面是一个简单的示例代码，展示如何实现一个多条件筛选页面。
1. `pages/filter/filter.wxml`
<view class="container">
<!-- 城市筛选 -->
<view class="filter-item">
<text>城市：</text>
<picker mode="multiSelector" range="{{cities}}" value="{{cityIndex}}" bindchange="onCityChange">
<view class="picker">
{{cities[cityIndex[0]]}} - {{cities[cityIndex[1]]}}
</view>
</picker>
</view>
<!-- 价格区间筛选 -->
<view class="filter-item">
<text>价格：</text>
<input type="number" placeholder="最低价" bindinput="onMinPriceInput" />
<input type="number" placeholder="最高价" bindinput="onMaxPriceInput" />
</view>
<!-- 类型筛选 -->
<view class="filter-item">
<text>类型：</text>
<checkbox-group bindchange="onTypeChange">
<label wx:for="{{types}}" wx:key="id">
<checkbox value="{{item.id}}" />{{item.name}}
</label>
</checkbox-group>
</view>
<!-- 确认筛选按钮 -->
<button bindtap="applyFilters">确认筛选</button>
</view>
2. `pages/filter/filter.wxss`
.container {
padding: 20px;
}
.filter-item {
margin-bottom: 20px;
}
.picker {
border: 1px solid #ccc;
padding: 5px;
}
3. `pages/filter/filter.js`
Page({
data: {
cities: [['北京', '上海', '广州', '深圳'], ['东城区', '西城区', '朝阳区', '海淀区']],
cityIndex: [0, 0],
minPrice: '',
maxPrice: '',
types: [
{ id: 1, name: '住宅' },
{ id: 2, name: '商铺' },
{ id: 3, name: '写字楼' }
],
selectedTypes: []
},
onCityChange(e) {
this.setData({
cityIndex: e.detail.value
});
},
onMinPriceInput(e) {
this.setData({
minPrice: e.detail.value
});
},
onMaxPriceInput(e) {
this.setData({
maxPrice: e.detail.value
});
},
onTypeChange(e) {
this.setData({
selectedTypes: e.detail.value
});
},
applyFilters() {
const { cityIndex, minPrice, maxPrice, selectedTypes } = this.data;
const city = `${this.data.cities[0][cityIndex[0]]} - ${this.data.cities[1][cityIndex[1]]}`;
console.log('筛选条件:', { city, minPrice, maxPrice, types: selectedTypes });
// 这里可以调用后端接口，传递筛选条件，获取筛选后的数据
// 例如：
// wx.request({
// url: 'https://example.com/api/filter',
// data: { city, minPrice, maxPrice, types: selectedTypes },
// success: res => {
// this.setData({ filteredData: res.data });
// }
// });
}
});
```
### 4. `pages/filter/filter.json`
```json
{
"navigationBarTitleText": "多条件筛选"
}
解释
1. **UI界面**：
- 使用`<picker>`组件实现城市的多选。
- 使用`<input>`组件实现价格区间的输入。
- 使用`<checkbox-group>`和`<checkbox>`组件实现类型的单选或多选。
2. **状态管理**：
- 使用`data`来存储城市索引、价格区间和选中的类型。
3. **事件处理**：
- `onCityChange`、`onMinPriceInput`、`onMaxPriceInput`、`onTypeChange`分别处理城市选择、价格输入和类型选择的事件。
- `applyFilters`方法在用户点击确认筛选按钮时调用，收集所有筛选条件并进行处理（例如调用后端接口）。
4. **样式**：
- 简单的样式让页面看起来更整洁。
你可以根据实际需求扩展和修改这个示例代码，例如增加更多的筛选条件、优化UI界面等。