小程序多条件筛选页面

创建一个小程序的多条件筛选页面通常涉及到使用 WXML 和 WXSS 来构建界面，以及使用 JavaScript 来处理逻辑。以下是一个简单的示例，展示了如何实现一个多条件筛选页面。

1. WXML 文件

<view class="container">
  <view class="filter">
    <picker mode="selector" range="{{categories}}" bindchange="onCategoryChange">
      <view class="picker">
        当前选择：{{selectedCategory}}
      </view>
    </picker>

    <picker mode="selector" range="{{prices}}" bindchange="onPriceChange">
      <view class="picker">
        当前选择：{{selectedPrice}}
      </view>
    </picker>

    <button bindtap="applyFilters">应用筛选</button>
  </view>

  <view class="results">
    <block wx:for="{{filteredItems}}" wx:key="index">
      <view class="item">{{item.name}} - {{item.price}}</view>
    </block>
  </view>
</view>

2. WXSS 文件

.container {
  padding: 20px;
}

.filter {
  margin-bottom: 20px;
}

.picker {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.results {
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

3. JS 文件

Page({
  data: {
    categories: ['全部', '电子产品', '服装', '家居'],
    prices: ['全部', '0-100', '100-500', '500以上'],
    selectedCategory: '全部',
    selectedPrice: '全部',
    items: [
      { name: '手机', price: 300 },
      { name: '电脑', price: 1500 },
      { name: 'T恤', price: 50 },
      { name: '沙发', price: 800 },
    ],
    filteredItems: []
  },

  onLoad() {
    this.setData({
      filteredItems: this.data.items
    });
  },

  onCategoryChange(e) {
    const index = e.detail.value;
    this.setData({
      selectedCategory: this.data.categories[index]
    });
  },

  onPriceChange(e) {
    const index = e.detail.value;
    this.setData({
      selectedPrice: this.data.prices[index]
    });
  },

  applyFilters() {
    const { selectedCategory, selectedPrice, items } = this.data;
    let filteredItems = items;

    if (selectedCategory !== '全部') {
      filteredItems = filteredItems.filter(item => item.category === selectedCategory);
    }

    if (selectedPrice !== '全部') {
      const priceRange = selectedPrice.split('-');
      const minPrice = priceRange[0] === '0' ? 0 : parseInt(priceRange[0]);
      const maxPrice = priceRange[1] ? parseInt(priceRange[1]) : Infinity;

      filteredItems = filteredItems.filter(item => item.price >= minPrice && item.price < maxPrice);
    }

    this.setData({
      filteredItems
    });
  }
});

说明

WXML: 创建了一个包含两个筛选条件（类别和价格）的界面，并显示筛选后的结果。

WXSS: 提供了一些基本的样式，使界面更美观。

JavaScript: 处理筛选逻辑，包括选择类别和价格范围，并根据选择更新显示的结果。

注意事项

你需要根据实际数据结构调整筛选逻辑。

确保在小程序的 app.json 中正确配置页面路径。

你可以根据需要扩展筛选条件，例如添加品牌、评分等。