uni-app 实现类似美团的多级筛选下拉功能

在uni-app中实现类似美团的多级筛选下拉功能，可以通过组合使用picker组件、radio-group组件以及自定义组件来实现。以下是一个简化的代码示例，展示如何实现这一功能。

1. 数据结构定义

首先，定义筛选条件的数据结构。例如，商品分类可能有品牌、价格区间、评价等多个筛选维度。

data() {
    return {
        filters: [
            {
                name: '品牌',
                options: ['品牌A', '品牌B', '品牌C'],
                selected: null
            },
            {
                name: '价格区间',
                options: ['$0-$50', '$50-$100', '$100+'],
                selected: null
            },
            // 可以继续添加其他筛选维度
        ],
        selectedFilters: {}
    };
}

2. Picker组件实现多级选择

对于需要展示较多选项的筛选维度，可以使用picker组件。

<view v-for="(filter, index) in filters" :key="index">
    <text>{{ filter.name }}:</text>
    <picker mode="selector" :range="filter.options" @change="onPickerChange(index, $event)">
        <view class="picker">
            {{ filter.selected ? filter.selected : '请选择' }}
        </view>
    </picker>
</view>

3. 处理选择事件

在methods中处理选择事件，更新筛选条件。

methods: {
    onPickerChange(index, event) {
        const value = this.filters[index].options[event.detail.value];
        this.$set(this.filters[index], 'selected', value);
        this.updateSelectedFilters();
    },
    updateSelectedFilters() {
        this.selectedFilters = {};
        this.filters.forEach(filter => {
            if (filter.selected) {
                this.$set(this.selectedFilters, filter.name, filter.selected);
            }
        });
        console.log(this.selectedFilters); // 打印当前选中的筛选条件
    }
}

4. 自定义组件（可选）

对于更复杂的UI需求，可以创建自定义组件来封装筛选逻辑，比如使用scroll-view和radio-group实现更复杂的多级筛选界面。

5. 应用筛选条件

最后，根据用户选择的筛选条件，过滤商品列表。这部分逻辑取决于你的商品数据来源和过滤规则，通常会在用户点击“确定”按钮后执行。

applyFilters() {
    // 根据selectedFilters过滤商品列表
    // this.filteredProducts = this.originalProducts.filter(...);
}

以上代码提供了一个基本框架，实际应用中可能需要根据具体需求进行调整和扩展。例如，可以添加更多筛选维度、优化UI布局、处理异步数据加载等。