uni-app 顶部自定义多条件筛选

在uni-app中实现顶部自定义多条件筛选，可以通过结合页面布局、数据绑定以及事件处理来完成。以下是一个简单的代码案例，展示了如何实现这一功能。

页面布局（template）

<template>
  <view class="container">
    <!-- 顶部筛选栏 -->
    <view class="filter-bar">
      <view v-for="(item, index) in filters" :key="index" class="filter-item">
        <picker mode="selector" :range="item.options" @change="handleFilterChange(index, $event)">
          <view class="picker-view">{{ item.selected }}</view>
        </picker>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 根据筛选条件显示内容 -->
      <view v-for="(item, index) in filteredData" :key="index">
        {{ item.name }} - {{ item.category }}
      </view>
    </view>
  </view>
</template>

样式（style）

<style scoped>
.container {
  padding: 20px;
}
.filter-bar {
  display: flex;
  margin-bottom: 20px;
}
.filter-item {
  flex: 1;
  margin-right: 10px;
}
.picker-view {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.content {
  margin-top: 20px;
}
</style>

脚本（script）

<script>
export default {
  data() {
    return {
      filters: [
        { selected: '全部', options: ['全部', '选项1', '选项2'] },
        { selected: '全部', options: ['全部', '分类1', '分类2'] }
      ],
      originalData: [
        { name: '商品1', category: '分类1' },
        { name: '商品2', category: '分类2' },
        { name: '商品3', category: '分类1' }
      ],
      filteredData: []
    };
  },
  methods: {
    handleFilterChange(index, event) {
      const value = this.filters[index].options[event.detail.value];
      this.filters[index].selected = value;
      this.applyFilters();
    },
    applyFilters() {
      let result = [...this.originalData];
      this.filters.forEach((filter, index) => {
        if (filter.selected !== '全部') {
          result = result.filter(item => {
            // 假设每个条件对应一个属性，如第一个条件对应category
            return index === 0 ? item.category === filter.selected : /* 其他条件逻辑 */;
          });
        }
      });
      this.filteredData = result;
    }
  },
  mounted() {
    this.filteredData = [...this.originalData];
  }
};
</script>

上述代码展示了如何在uni-app中实现一个基本的顶部自定义多条件筛选功能。通过picker组件实现选项选择，并在选择变化时触发筛选逻辑，最终根据筛选条件更新显示的内容。根据实际需求，可以扩展筛选条件和逻辑。