小程序多条件筛选

在小程序中实现多条件筛选功能通常涉及到前端的页面布局和后端的数据处理。以下是一个简单的示例，展示如何在小程序中创建一个多条件筛选页面。

1. 页面结构 (WXML)

<view class="filter-container">
  <view class="filter-item">
    <text>类别：</text>
    <picker bindchange="onCategoryChange" value="{{selectedCategory}}" range="{{categories}}" >
      <view class="picker">{{categories[selectedCategory]}}</view>
    </picker>
  </view>
  
  <view class="filter-item">
    <text>价格：</text>
    <picker bindchange="onPriceChange" value="{{selectedPrice}}" range="{{prices}}">
      <view class="picker">{{prices[selectedPrice]}}</view>
    </picker>
  </view>
  <button bindtap="applyFilters">应用筛选</button>
</view>
<view class="result-container">
  <block wx:for="{{filteredItems}}" wx:key="id">
    <view class="item">
      <text>{{item.name}}</text>
      <text>{{item.category}}</text>
      <text>{{item.price}}</text>
    </view>
  </block>
</view>

2. 页面逻辑 (JS)

Page({
  data: {
    categories: ['全部', '电子产品', '服装', '食品'],
    prices: ['全部', '0-100', '100-500', '500+'],
    selectedCategory: 0,
    selectedPrice: 0,
    items: [
      { id: 1, name: '手机', category: '电子产品', price: 600 },
      { id: 2, name: 'T恤', category: '服装', price: 50 },
      { id: 3, name: '零食', category: '食品', price: 20 },
      // 更多商品
    ],
    filteredItems: []
  },
  onLoad: function() {
    this.setData({ filteredItems: this.data.items });
  },
  onCategoryChange: function(e) {
    this.setData({ selectedCategory: e.detail.value });
  },
  onPriceChange: function(e) {
    this.setData({ selectedPrice: e.detail.value });
  },
  applyFilters: function() {
    const { items, selectedCategory, selectedPrice, categories, prices } = this.data;
    const categoryFilter = selectedCategory == 0 ? true : item => item.category === categories[selectedCategory];
    const priceFilter = selectedPrice == 0 ? true : item => {
      if (selectedPrice == 1) return item.price <= 100;
      if (selectedPrice == 2) return item.price > 100 && item.price <= 500;
      if (selectedPrice == 3) return item.price > 500;
    };
    const filteredItems = items.filter(item => categoryFilter(item) && priceFilter(item));
    this.setData({ filteredItems });
  }
});

3. 样式 (WXSS)

.filter-container {
  padding: 10px;
}
.filter-item {
  margin-bottom: 10px;
}
.picker {
  border: 1px solid #ccc;
  padding: 5px;
  display: inline-block;
}
.result-container {
  margin-top: 20px;
}
.item {
  border: 1px solid #eaeaea;
  padding: 10px;
  margin-bottom: 10px;
}

说明

1. **页面结构 (WXML)**：包含了两个筛选条件的选择器（类别和价格），以及一个按钮来应用筛选。下方展示了筛选后的结果。

2. **页面逻辑 (JS)**：定义了数据和状态管理，包括筛选的逻辑。在 `applyFilters` 方法中，根据选择的条件过滤商品列表。

3. **样式 (WXSS)**：提供了一些简单的样式，使页面看起来更美观。

你可以根据实际需求修改类别和价格的选项，以及商品的数据源。希望这个示例能帮助你实现多条件筛选的功能！